javascript - 获取直接子项 - 不是嵌套子项

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 平台上，类别 metabox 但我想使用 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');
    }
});

根据文档:

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree...

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