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