ejemplos - jquery selector

jQuery: excluye $(this) del selector

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, deseo 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 encontrar la manera de 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

Debe utilizar el método "hermanos" () y evitar que se ejecute 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'');
});

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

Answer 2

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

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

Answer 3

Puede usar la función not lugar del selector: :not :

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

Answer 4

También puede usar el .siblings() 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/