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

Question

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.

Answer 1

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

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

Answer 2

Puede usar la función not en lugar de la función : not selector:

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

Answer 3

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

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/

Answer 4

Debería usar los " hermanos () " y evitar que se ejecute el " .content a " selector 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/