我有一些使用 JQuery 操作的分层数据，并且我正在尝试添加某种类型的视觉指示，以指示选择了我的树中的哪些元素。这是我正在生成的 html 示例（我们正在对其进行操作）：
<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#miller 中。第一个复选框 (.selectedcheck) 仅用于显示选择了一个区域（它一开始是隐藏的，并在选择父区域时显示，因此如果您在埃及单击 .millermultiselect，在开罗单击 .selectedcheck将取代开罗的 .millermultiselect 变得可见）。我想做的也是向任何包含（作为直接子项）选中复选框的 li 添加一个类。我正在尝试使用以下 JQuery 代码来完成此操作：
$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen');
我遇到的问题是，由于所有区域都由嵌套的 ul 组成，因此选中任何区域中的复选框也会将 .chosen 添加到树中更高的任何 li ......因此单击 Cairo 的复选框会添加 .选择了埃及和非洲的班级。
任何人都知道我将如何仅捕获具有可见且选中复选框的 li 作为直接孩子？
这是我的整个 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();
});
});