JQuery:有(),我只需要选择儿童
问题描述:
我有我用JQuery操作的一些分层数据,我试图添加一些类型的视觉指示,说明我的树中哪些元素被选中。这里是我生成HTML的样本(我们正在操纵):JQuery:有(),我只需要选择儿童
<li>
<input class="selectedcheck" checked disabled type="checkbox" name="ign-130">
<input class="millermultiselect" type="checkbox" name="chk-130">
<a href="#" data-parent="6" data-nodename="Egypt" data-self="130">Egypt</a>
<ul>
<li>
<input class="selectedcheck" checked disabled type="checkbox" name="ign-131">
<input class="millermultiselect" type="checkbox" name="chk-131">
<a href="#" data-parent="130" data-nodename="Cairo" data-self="131">Cairo</a>
</li>
</ul>
</li>
所有这一切都位于一个div#米勒之内。第一个复选框(.selectedcheck)仅用于显示选择了一个区域(它开始隐藏,并且在选择父区域时显示,所以如果您在埃及点击.millermultiselect,开罗的.selectedcheck将成为可见,取代开罗的.millermultiselect)。我想要做的也是添加一个类到任何包含(作为一个直接孩子)复选框的李。我试图用下面的jQuery代码来实现:
$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen');
是我遇到的问题是,由于所有的区域都是由嵌套UL的的,检查的任何区域中的复选框,还增加了.chosen到树中的任何一个更高...因此单击开罗的复选框会将.chosen类添加到埃及和非洲。
任何人都有一个想法,我将如何去捕获李的有一个可见的复选框作为一个直接的孩子?
这里是我的整个js文件,以防万一它提供了深入了解:
$(document).ready(function() {
$(".selectedcheck").hide();
showSelected = function(){
$("#miller li").removeClass("chosen");
$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen');
};
$("#miller a").click(function(event) {
event.preventDefault();
$("#miller li").removeClass("selected");
$(this).parent().addClass("selected");
data = $(this).data();
$("#addChild").attr("href", "addChild.php?parentid=" + data.self).html("Add item under " + data.nodename);
$("#addSibling").attr("href", "addChild.php?parentid=" + data.parent).html("Add item next to " + data.nodename);
$("#editRegion").attr("href", "editRegion.php?id=" + data.self).html("Edit " + data.nodename);
$("#deleteRegion").attr("href", "deleteRegion.php?id=" + data.self).html("Delete " + data.nodename);
$("#addResort").attr("href", "addResort.php?regionid=" + data.self).html("Add resort to " + data.nodename);
$("#miller ul ul").hide();
$(this).parents("#miller ul").show();
$(this).siblings("#miller ul").show();
showSelected();
});
$("#miller .millermultiselect").click(function(event) {
$("#miller li").removeClass("selected");
$(this).parent().addClass("selected");
$("#miller ul ul").hide();
$(this).parents("#miller ul").show();
if($(this).is(':checked')) {
$(this).parent().find(".millermultiselect").not(this).hide();
$(this).parent().find(".millermultiselect").not(this).removeAttr("checked");
$(this).parent().find(".selectedcheck").show();
} else {
$(this).parent().find(".millermultiselect").not(this).show();
$(this).parent().find(".selectedcheck").hide();
}
$(this).siblings(".selectedcheck").hide();
$(this).siblings("#miller ul").show();
showSelected();
});
});
答
可以使用嫡系选择,然后获取它的父:
$("#miller li > input:checkbox:checked:visible").parent().addClass("chosen");
答
我怎么会去关于只捕获具有可见的复选框作为直接孩子的李?
如何解决问题?
$('input:checkbox').is(':visible').is(':checked').parent('li')
这正是我所期待的。我很确定我的大脑今天没有工作。 – 2012-04-11 16:04:07