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

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

Answer 2

您的代码存在一些问题。首先，.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 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
}