javascript - jQuery - .on ("click") 隐藏每个 sibling

Question

我在隐藏单击的对象旁边的每个同级对象时遇到了一些麻烦。 简单的 $(".hider").hide(); 对我不起作用，因为我有多个对象，我只想隐藏单击的一个对象旁边的那些 sibling ，其他对象需要获取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");
});