jQuery exclut les éléments avec une certaine classe dans le sélecteur


127

Je souhaite configurer un déclencheur d'événement de clic dans jQuery pour certaines balises d'ancrage.

Je veux ouvrir certains liens dans un nouvel onglet tout en ignorant ceux avec une certaine classe (avant que vous ne demandiez, je ne peux pas mettre de classes sur les liens que j'essaie d'attraper car ils proviennent d'un CMS).

Je souhaite exclure les liens avec la classe "button"OU"generic_link"

J'ai essayé:

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

Mais cela ne semble pas fonctionner, comment puis-je faire une déclaration OR à inclure "generic_link"dans l'exclusion?

Réponses:


263

Vous pouvez utiliser la méthode .not () :

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

Vous pouvez également utiliser le sélecteur: not () :

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

Il y a peu de différence entre les deux approches, sauf qu'elle .not()est plus lisible (surtout lorsqu'elle est enchaînée) et qu'elle :not()est très légèrement plus rapide. Consultez cette réponse Stack Overflow pour plus d'informations sur les différences.


1
Donc je pourrais faire: $ (". Content_box a"). Not (". Button"). Not (". Generic_link"). Click (function (e) ...?
Titan

1
A parfaitement fonctionné, même lors de l'utilisation .each().
cfx

Il semble qu'il y ait un bogue lors de l'utilisation .text()- le texte de l'élément supprimé à l'aide de say .notest toujours dans le texte.
Netsi1964


2

Pour ajouter des informations qui m'ont aidé aujourd'hui, un objet jQuery / thispeut également être passé au sélecteur .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>

L'exemple ci-dessus peut être simplifié, mais voulait montrer l'utilisation de thisdans le not()sélecteur.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.