Question

我有这样的布局：

<ul id="tax_id">
    <li>
        <label>Input One
            <input type="checkbox" /> Checkbox One
        </label>
        ... elements ...
        <ul class="children">
            <li>
                <label>Input Two
                    <input type="checkbox" /> Checkbox Two
                </label>
                ... elements ...
                <ul class="children">
                    ... elements ...
                </ul>
            </li>
        </ul>
    </li>
</ul>

每当我检查输入时，我都希望下一个孩子UL显示或不显示（如果未选中）。我一直遇到的问题是，如果我使用find()，它也会选择嵌套的子项，这不是我想要的。

有些规定是我不能有额外的类或ID，因为这是在WordPress平台，类别元数据库，但我想使用Jquery来操作数据。我的jquery是这样的：

$('#tax_id li label > input:checkbox').click(function(){
    if($(this).is(':checked')){
        $(this).parent('label').parent('li').find('ul.children').css('display', 'block');
    }
    else{
        $(this).parent('label').parent('li').find('ul.children').css('display', 'none');
    }
});

JSFiddle

Answer 1

使用.children()代替.find()：

$('#tax_id li label > input:checkbox').click(function(){
    if($(this).is(':checked')){
        $(this).parent('label').parent('li').children('ul.children').css('display', 'block');
    }
    else{
        $(this).parent('label').parent('li').children('ul.children').css('display', 'none');
    }
});

根据文件：

.children()方法与.find()的{{1}}不同只在DOM树上单个级别...

http://api.jquery.com/children/

Answer 2

您可以使用nextAll和eq，如下所示：

$('#tax_id li label > input:checkbox').click(function(){
    if($(this).is(':checked')){
        $(this).parent('label').nextAll('ul.children').eq(0).css('display', 'block');
    }
    else{
        $(this).parent('label').nextAll('ul.children').eq(0).css('display', 'none');
    }
});

获得直接儿童 - 不是嵌套儿童

2 个答案: