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が表示されます。 Cairoの.millermultiselectの代わりに表示されるようになります)。私がやりたいのは、チェックボックスがオンになっている(直接の子として)liにクラスを追加することです。私は次のJQueryコードでこれを達成しようとしています:
$("#miller li:has(input:checkbox:checked:visible)").addClass('chosen');
私が抱えている問題は、すべてのリージョンがネストされたulで構成されているため、任意のリージョンのチェックボックスをオンにすると、ツリーの上位の任意のliに.chosenが追加されることです...したがって、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();
});
});