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を1つの実例で更新しました。

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