jQuery-.on（“ click”）隱藏每個兄弟姐妹

Question

我在隱藏每個被單擊的同級對象時遇到麻煩。 簡單的$(".hider").hide(); 不適用於我，因為我有多個對象，並且我只想隱藏那些被單擊的兄弟姐妹，其他兄弟姐妹則需要獲取該hider類，以便用戶無法再次與它進行交互。

 $(document).on('click', '.hider', function() { console.log("clicked"); var obj = $(this); obj.parent("ul").children("span.hider").each(function() { $(this).removeClass("hider"); console.log($(this)); }); }); 

 .c-pointer { cursor: pointer; } li a span { color: red } li a span.hider { color: #000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="emoticon"> <div class="sb-social"> <ul class="c-default"> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> </ul> </div> </div> <!-- --> <hr/> <!-- --> <div class="emoticon"> <div class="sb-social"> <ul class="c-default"> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> </ul> </div> </div> <!-- --> <hr/> <!-- --> <div class="emoticon"> <div class="sb-social"> <ul class="c-default"> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> <li class="enabled"> <a class="c-pointer"> <span class="hider">Click on me to hide All</span> </a> </li> <!-- --> </ul> </div> </div> <!-- --> <hr/> 

有人經歷過嗎？

jsFiddle在這里

Answer 1

$(document).on('click', '.hider', function() {
  var obj = $(this);
  obj.closest("ul.c-default").find(".hider").not(obj).removeClass("hider");
});

Answer 2

您的代碼有幾個問題。 首先，.parent（）只會查找直接的父元素，而您的ul在層次結構中更高。 您可以改用.parents（）。 其次，出於相同的原因，您將不希望使用子代，而是可以使用find方法。 正如@Igor所建議的那樣，您還可以結合.not（obj）來過濾列表而不是條件。

obj.parents("ul").find("span.hider").not(obj).each(function(i, e) {
  $(e).removeClass("hider");      
});

您也可以使用obj.siblings（）來獲取其直接同級，但是由於沒有同級，因此無法在跨度上使用。

我用一個工作示例更新了您的jsfiddle。

https://jsfiddle.net/oqgzkw3p/3/

編輯：不從@Igor添加。

Answer 3

$(document).on('click', '.hider', function() {
  console.log("clicked");
  var obj = $(this);
  obj.siblings().hide() //You can use hide, or addClass('hider') or whatever you want
}