jQuery schließt Elemente mit einer bestimmten Klasse im Selektor aus

127

Ich möchte einen Klickereignisauslöser in jQuery für bestimmte Ankertags einrichten.

Ich möchte bestimmte Links in einem neuen Tab öffnen, während ich diejenigen mit einer bestimmten Klasse ignoriere (bevor Sie fragen, kann ich den Links, die ich abfangen möchte, keine Klassen zuweisen, da sie von einem CMS stammen).

Ich möchte Links mit der Klasse "button"OR ausschließen"generic_link"

Ich habe versucht:

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

Aber das scheint nicht zu funktionieren. Wie mache ich eine ODER-Anweisung, um sie "generic_link"in den Ausschluss aufzunehmen?

jquery Titan
quelle

Antworten:

263

Sie können die .not () -Methode verwenden:

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

Alternativ können Sie auch den Selektor: not () verwenden :

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

Es gibt kaum einen Unterschied zwischen den beiden Ansätzen, außer dass sie .not()besser lesbar sind (insbesondere wenn sie verkettet sind) und :not()sehr geringfügig schneller sind. Weitere Informationen zu den Unterschieden finden Sie in dieser Antwort zum Stapelüberlauf.

Pranay Rana
quelle
1
Also könnte ich tun: $ (". Content_box a"). Not (". Button"). Not (". Generic_link"). Click (function (e) ...?
Titan
1
Funktionierte perfekt, auch bei Verwendung .each().
cfx
Es scheint, dass es einen Fehler bei der Verwendung gibt .text()- der Text des Elements, das mit say entfernt wurde, .notbefindet sich noch im Text.
Netsi1964
26

benutze das..

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

Sushil Bharwani
quelle
2

Um einige Informationen hinzuzufügen, die mir heute geholfen haben, kann ein jQuery-Objekt / thisauch an den Selektor .not () übergeben werden .

$(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>
Erweitern Sie das Snippet

Das obige Beispiel kann vereinfacht werden, wollte aber die Verwendung von thisim not()Selektor zeigen.

Vignesh Raja
quelle