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>