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?

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.


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


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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.