0

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();
    });
});
4

2 に答える 2

2

直接の子孫セレクターを使用して、その親を取得できます。

$("#miller li > input:checkbox:checked:visible").parent().addClass("chosen");
于 2012-04-11T16:00:16.890 に答える
1

チェックボックスがオンになっている表示されているliのみを直接の子としてキャプチャするにはどうすればよいですか?

問題を元に戻すのはどうですか?

$('input:checkbox').is(':visible').is(':checked').parent('li')
于 2012-04-11T16:03:49.973 に答える