jQuery excluir elementos com determinada classe no seletor

127

Quero configurar um gatilho de evento de clique no jQuery para determinadas tags de âncora.

Desejo abrir determinados links em uma nova guia, ignorando os de uma determinada classe (antes de você perguntar, não posso colocar classes nos links que estou tentando capturar, pois eles vêm de um CMS).

Quero excluir links com a classe "button"OR"generic_link"

Eu tentei:

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

Mas isso não parece funcionar, como também faço uma declaração OR para incluir "generic_link"na exclusão?

jquery

— Titã
fonte

263

Você pode usar o método .not () :

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

Como alternativa, você também pode usar o seletor: not () :

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

Há pouca diferença entre as duas abordagens, exceto que .not()é mais legível (especialmente quando encadeada) e :not()é muito marginalmente mais rápida. Consulte esta resposta de estouro de pilha para obter mais informações sobre as diferenças.

— Pranay Rana
fonte

1

Então eu poderia fazer: $ não ( "botão. ") Não (" generic_link "). Click (function (e) ... (" content_box a.")...?

— Titan

1

Funcionou perfeitamente, mesmo ao usar .each().

— cfx

Parece que há um erro ao usar .text()- o texto do elemento removido usando say .notainda está no texto.

— Netsi1964

26

usa isto..

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

— sushil bharwani
fonte

2

Para adicionar algumas informações que me ajudaram hoje, um objeto jQuery / thistambém pode ser passado para o seletor .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>

Expandir snippet

O exemplo acima pode ser simplificado, mas você deseja mostrar o uso de thisno not()seletor.

— Vignesh Raja
fonte