jQuery виключає елементи з певним класом у селекторі


127

Я хочу встановити тригер події клацання в jQuery для певних якорних тегів.

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

Я хочу виключити посилання з класом "button"АБО"generic_link"

Я намагався:

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

Але це, здається, не працює, а також як я можу операцію АБО для включення "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

Здається, що при використанні є помилка .text()- текст елемента, видалений за допомогою слова say .not, все ще знаходиться в тексті.
Netsi1964


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()селекторі.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.