Question

我有jQuery用于分层复选框，看起来像这样

我的HTML：

<ul class='tristate'>
   <li>
      <input type='checkbox' />
      <label />
      <ul>
         <li>
            <input type='checkbox' />
            <label />
         </li>
         <li>
            <input type='checkbox' />
            <label />
            <ul>
               <li>
                   <!--can be more in the hierarchy -->
         </li>
      </ul>
   </li>
</ul>

我的jQuery：

$(document).on("click", ".tristate", function (event) {
    var $source = $(event.target);
    var checked = $source.prop("checked");

    //filter checkboxes that are checked the opposite way to the source
    var selector = checked ? ':not(:checked)' : ':checked';

    //set all descendant checkboxes to the same value as the source
    $source
        .siblings("ul")
        .find('input:checkbox')
        .filter(selector)
        .prop({
            indeterminate: false,
            checked: checked
        });

    //parents are indeterminate if there are sibling checkboxes 
    //that are checked the opposite way to the source
    var $checkboxesNextToLabel = $lis.children('input:checkbox');
    var $checkboxesInsideLabel = $lis.children('label').children('input:checkbox');
    var indeterminate = $checkboxesNextToLabel
                        .add($checkboxesInsideLabel)
                        .filter(selector).length > 0;

    //set state of parent checkboxes
    $source
        .parentsUntil(".tristate")
        .filter('ul')
        .prev('label')  //label must always be first previous
        .prev('input:checkbox') //checkbox must always be second previous
        .prop({
            indeterminate: indeterminate,
            checked: checked && !indeterminate
        });
});

这适用于我目前在我的应用程序中使用的标记，但是我想在遍历父复选框时使代码更加健壮。具体而言 - .filter('ul').prev('label').prev('input:checkbox')表示输入必须紧接在标签之前，标签必须紧接在输入之前。

我想要的是像closest这样的命令遍历兄弟姐妹而不是祖先，所以我可以写出类似.filter('ul').prevNearest('input:checkbox')

的内容

编辑 - 警告 对于遇到此问题且想要在复选框层次结构中使用代码的任何人，请注意。我的逻辑是有缺陷的。祖父母必须检查他们所有的孩子。此代码不会这样做。

Answer 1

我们可以尝试以下代码循环遍历所有ul元素并找到最近的复选框..

var ulCol = $(this).parentsUntil(".tristate").filter('ul');
    ulCol.each(function(){
        $(this).prevAll('input:checkbox:first').prop({
            indeterminate: indeterminate,
            checked: checked && !indeterminate
        });
    });

Answer 2

jQuery的.prevAll()返回所有先前的元素（可选地匹配选择器）。它按顺序返回它们，从最近的元素到最远的元素。

由于您只想要第一个匹配，因此您只需选择找到的第一个元素：

$source
    .parentsUntil(".tristate")
    .filter('ul')
    .prevAll('input:checkbox')[0]

您还可以添加.length > 0条件，以检查之前的元素是否与您的选择器匹配。

通过标签获取最近的兄弟姐妹

2 个答案: