Jak mogę wykluczyć $(this) z selektora jQuery?

Mam coś takiego:

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

Gdy jeden z tych linków zostanie kliknięty, chcę wykonać .funkcja hide () na łączach, które nie zostały kliknięte. Rozumiem, że jQuery ma selektor :not, ale nie wiem jak go użyć w tym przypadku, ponieważ konieczne jest wybranie linków za pomocą $(".content a")

Chcę zrobić coś takiego

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

Ale nie mogę rozgryźć, jak prawidłowo używać selektora :not w tym przypadku.

Author: isherwood, 2009-01-13

4 answers

Spróbuj użyć not() metoda zamiast :not() selektor .

$(".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/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-26 09:09:05

Możesz użyć not funkcja zamiast :not selektor:

$(".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/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-26 09:10:11

Możesz również użyć metody 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');
});

Demo robocze: 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/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-25 13:27:56

Należy użyć metody" rodzeństwo () "i zapobiec uruchomieniu".content a " selektor w kółko tylko dla zastosowania tego efektu:

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');
});

Zobacz tutaj: 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/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-09 06:42:15