jquery 检查项目是否父列表项未隐藏

Question

我有一个“全选”复选框。我想迭代包含类 cb-org 的每个复选框并设置 checked 属性，但前提是父列表项元素没有类 hidden 应用于它。

这样做的原因是因为我有一个客户端过滤器，所以并非所有列表项都是可见的，并且我不希望我的“全选”为以下项目设置 checked 属性目前隐藏。

$('#organisations-selectall').change(function() {
  $('.cb-org').each(function (i, obj) {
    if (!$(obj).parent('li').hasClass('hidden')) {
      $(obj).prop('checked', this.checked);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="input-group">
      <span class="input-group-addon">Filter</span>
    	<input id="org-filter" type="text" class="form-control">
    </div>
  </li>
  <li>
    <div class="checkbox">
      <label>
        <input id="organisations-selectall" type="checkbox">
        <strong>Select All</strong>
      </label>
    </div>
  </li>
  <li class="attr-org-entity hidden">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 1
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 2
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 3
      </label>
    </div>
  </li>
</ul>

Answer 1

您可以利用 jQuery 固有的循环，这样您就不必自己编写它。

1. 找到所有复选框
2. 获取其父级 li，无论它在 DOM 树中的位置有多高
3. 过滤 li 以仅获取那些没有 hidden 类的内容
4. 对于过滤后的 li，找到其嵌套的复选框
5. 更改其选中的属性

$('#organisations-selectall').change(function(e) {
  $('.cb-org')
    .closest('li')
    .filter(':not(.hidden)')
    .find('.cb-org')
    .prop('checked', this.checked);
});

.hidden { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="input-group">
      <span class="input-group-addon">Filter</span>
    	<input id="org-filter" type="text" class="form-control">
    </div>
  </li>
  <li>
    <div class="checkbox">
      <label>
        <input id="organisations-selectall" type="checkbox">
        <strong>Select All</strong>
      </label>
    </div>
  </li>
  <li class="attr-org-entity hidden">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 1
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 2
      </label>
    </div>
  </li>
  <li class="attr-org-entity">
    <div class="checkbox">
      <label>
        <input type="checkbox" class="cb-org">
        Org 3
      </label>
    </div>
  </li>
</ul>