jQuery исключает элементы с определенным классом в селекторе

127

Я хочу настроить триггер события клика в jQuery для определенных тегов привязки.

Я хочу открывать определенные ссылки на новой вкладке, игнорируя ссылки с определенным классом (прежде чем вы спросите, я не могу помещать классы в ссылки, которые я пытаюсь поймать, поскольку они поступают из CMS).

Я хочу исключить ссылки с классом "button"OR"generic_link"

Я пытался:

$(".content_box a[class!=button]").click(function (e) {
    e.preventDefault();     
    window.open($(this).attr('href'));
});

Но это, похоже, не работает, также как мне сделать оператор OR для включения "generic_link"в исключение?

Титан
источник

Ответы:

263

Вы можете использовать метод .not () :

$(".content_box a").not(".button")

В качестве альтернативы вы также можете использовать селектор: not () :

$(".content_box a:not('.button')")

Между этими двумя подходами мало различий, за исключением того, .not()что они более читабельны (особенно в цепочке) и :not()немного быстрее. См. Этот ответ о переполнении стека для получения дополнительной информации о различиях.

Праная Рана
источник
1
Так что я мог сделать: $ (". Content_box a"). Not (". Button"). Not (". Generic_link"). Click (function (e) ...?
Titan
1
Работает отлично даже при использовании .each().
cfx 05
Похоже, при использовании есть ошибка .text()- текст элемента, удаленного с помощью say .not, все еще находится в тексте.
Netsi1964,
26

использовать это..

$(".content_box a:not('.button')")

сушил бхарвани
источник
2

Чтобы добавить некоторую информацию, которая мне помогла сегодня, объект jQuery / thisтакже можно передать в селектор .not () .

$(document).ready(function(){
    $(".navitem").click(function(){
        $(".navitem").removeClass("active");
        $(".navitem").not($(this)).addClass("active");
    });
});
.navitem
{
    width: 100px;
    background: red;
    color: white;
    display: inline-block;
    position: relative;
    text-align: center;
}
.navitem.active
{
    background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navitem">Home</div>
<div class="navitem">About</div>
<div class="navitem">Pricing</div>

Приведенный выше пример можно упростить, но хотелось бы показать использование thisв not()селекторе.

Виньеш Раджа
источник