jQuery excluye elementos con cierta clase en el selector

127

Quiero configurar un activador de evento de clic en jQuery para ciertas etiquetas de anclaje.

Quiero abrir ciertos enlaces en una nueva pestaña mientras ignoro los que tienen una determinada clase (antes de preguntar no puedo poner clases en los enlaces que estoy tratando de detectar, ya que provienen de un CMS).

Quiero excluir enlaces con la clase "button"O"generic_link"

Yo he tratado:

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

Pero eso no parece funcionar, ¿cómo hago una declaración OR para incluir "generic_link"en la exclusión?

Titán
fuente

Respuestas:

263

Puede usar el método .not () :

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

Alternativamente, también puede usar el selector: not () :

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

Hay poca diferencia entre los dos enfoques, excepto que .not()es más legible (especialmente cuando está encadenado) y :not()es muy marginalmente más rápido. Consulte esta respuesta de desbordamiento de pila para obtener más información sobre las diferencias.

Pranay Rana
fuente
1
Entonces podría hacer: $ (". Content_box a"). Not (". Button"). Not (". Generic_link"). Click (function (e) ...?
Titan
1
Funcionó perfectamente, incluso cuando se usa .each().
cfx
Parece que hay un error al usarlo .text(): el texto del elemento eliminado usando say .nottodavía está en el texto.
Netsi1964
26

utilizar este..

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

sushil bharwani
fuente
2

Para agregar información que me ayudó hoy, un objeto jQuery / thistambién se puede pasar al selector .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>

El ejemplo anterior se puede simplificar, pero quería mostrar el uso de thisen el not()selector.

Vignesh Raja
fuente