我有这样的布局:
<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');
}
});
最佳答案
使用.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...
关于javascript - 获取直接子项 - 不是嵌套子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27989810/