¿Cómo puedo excluir $ (esto) de un selector jQuery?

203

Tengo algo como esto:

<div class="content">
    <a href="#">A</a>
</div>
<div class="content">
    <a href="#">B</a>
</div>
<div class="content">
    <a href="#">C</a>
</div>

Cuando se hace clic en uno de estos enlaces, quiero realizar la función .hide () en los enlaces en los que no se hace clic. Entiendo que jQuery tiene el selector: no, pero no puedo entender cómo usarlo en este caso porque es necesario que seleccione los enlaces usando$(".content a")

Quiero hacer algo como

$(".content a").click(function()
{
    $(".content a:not(this)").hide("slow");
});

pero no puedo entender cómo usar el selector: no correctamente en este caso.

jquery jquery-selectors this

— Logan Serman
fuente

3

intente !$(this)con un código más simple.

— Ari

390

Intente usar el not() método en lugar del :not()selector .

$(".content a").click(function() {
    $(".content a").not(this).hide("slow");
});

— Dan Herbert
fuente

¿Por qué no puedo hacer que esto funcione ... $ ("# menu-holder #first_level li"). Not (this) .addClass ("returnToParent");

— marck

44

@marck Sin contexto, no lo sé. Crea una nueva pregunta y puedo ayudarte.

— Dan Herbert

2

Esta es una solución muy mala (en cuanto al rendimiento). No hay una razón real para $(".content a")entrar en la clickdevolución de llamada ... en CADA clic ...

— Ronen Cypis

42

Puede usar la notfunción en lugar del :notselector:

$(".content a").not(this).hide("slow")

— Zach Langley
fuente

9

También puede usar el .siblings()método jQuery :

HTML

<div class="content">
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
</div>

Javascript

$(".content").on('click', 'a', function(e) {
  e.preventDefault();
  $(this).siblings().hide('slow');
});

Demostración de trabajo: http://jsfiddle.net/wTm5f/

— Edgar Ortega
fuente

5

Debe usar el método "siblings ()" y evitar ejecutar el selector ".content a" una y otra vez solo para aplicar ese efecto:

HTML

<div class="content">
    <a href="#">A</a>
</div>
<div class="content">
    <a href="#">B</a>
</div>
<div class="content">
    <a href="#">C</a>
</div>

CSS

.content {
    background-color:red;
    margin:10px;
}
.content.other {
    background-color:yellow;
}

Javascript

$(".content a").click(function() {
  var current = $(this).parent();
  current.removeClass('other')
    .siblings()
    .addClass('other');
});

Ver aquí: http://jsfiddle.net/3bzLV/1/

— Ronen Cypis
fuente