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 here

Answer 1

你必須與你的代碼一對夫婦的問題。首先，.parent（）只能找到直接的父元素，而你的ul在層次結構中要高得多。你可以使用.parents（）來代替。其次，你不會想出於同樣的原因使用孩子，反而會找到工作。正如@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 2

$(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 
} 

Answer 3

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