jQuery wyklucza elementy z określoną klasą w selektorze

127

Chcę ustawić wyzwalacz zdarzenia kliknięcia w jQuery dla niektórych tagów kotwicy.

Chcę otworzyć określone linki w nowej zakładce, ignorując te z określoną klasą (zanim zapytasz, nie mogę umieścić klas na linkach, które próbuję złapać, ponieważ pochodzą z CMS).

Chcę wykluczyć linki z klasą "button"OR"generic_link"

Próbowałem:

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

Ale to nie wydaje się działać, a także jak zrobić oświadczenie LUB, aby uwzględnić je "generic_link"w wykluczeniu?

tytan
źródło

Odpowiedzi:

263

Możesz użyć metody .not () :

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

Alternatywnie możesz także użyć selektora: not () :

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

Istnieje niewielka różnica między tymi dwoma podejściami, z wyjątkiem tego, że .not()jest bardziej czytelny (zwłaszcza gdy jest połączony łańcuchowo) i :not()jest bardzo nieznacznie szybszy. Zobacz odpowiedź na temat przepełnienia stosu, aby uzyskać więcej informacji na temat różnic.

Pranay Rana
źródło
1
Mogłem więc zrobić: $ (". Content_box a"). Not (". Button"). Not (". Generic_link"). Click (function (e) ...?
Titan
1
Działał doskonale, nawet podczas używania .each().
cfx
Wygląda na to, że jest błąd podczas używania .text()- tekst elementu usuniętego za pomocą say .notjest nadal w tekście.
Netsi1964
26

Użyj tego..

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

sushil bharwani
źródło
2

Aby dodać trochę informacji, które pomogły mi dzisiaj, obiekt jQuery / thismożna również przekazać do selektora .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>

Powyższy przykład można uprościć, ale chciałem pokazać użycie thisw not()selektorze.

Vignesh Raja
źródło