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

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 el .función hide() en los enlaces en los que no se hace clic. Entiendo que jQuery tiene el selector: not, pero no puedo averiguar cómo usarlo en este caso porque es necesario que seleccione los enlaces utilizando $(".content a")

Quiero hacer algo como

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

Pero no puedo averiguar cómo usar correctamente el selector :not en este caso.

Author: isherwood, 2009-01-13
Source

4 answers

Trate de usar el not() método en lugar de la :not() selector.

$(".content a").click(function() {
    $(".content a").not(this).hide("slow");
});
 355
Author: Dan Herbert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-26 09:09:05

Puede utilizar el not función en lugar de la :not selector:

$(".content a").not(this).hide("slow")
 41
Author: Zach Langley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-26 09:10:11

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 /

 9
Author: Edgar Ortega,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-25 13:27:56

Debe usar el método "siblings ()", y evitar que se ejecute el ".contenido un " 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/

 5
Author: Ronen Cypis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-09 06:42:15