0

データベースによって生成された動的なマルチレベル リストがあります。読み込み時には、最初のレベルの要素以外はすべて非表示になります。子要素の1つがチェックされている場合、ロード時に親アイテムを再表示したいと思います。直接の親を再表示するようになりましたが、主な親は表示されませんでした。

私のリストは次のように設定されています：

<div class="form-row" id="existing-products">
    <label class="form_label">Choose products</label>
    <ul class="product-tree">
        <li>Main Product 1
            <ul>
                <li class="productList">Sub Product 1
                    <ul>
                        <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main1_sub1" checked />main1_sub1</li>
                    </ul>
                </li>
                <li class="productList">Sub Product 2
                    <ul>
                        <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main1_sub2"  />main1_sub2</li>
                    </ul>
                </li>
            </ul>
        </li>               
        <li>Main Product 2      
            <ul>
                <li class="productList">Sub Product 1
                    <ul>
                        <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main2_sub1"  />main2_sub1</li>
                    </ul>
                </li>
            </ul>
        </li>               
    </ul>
</div>

リストを切り替えるスクリプトは次のとおりです。

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    var plus = $('<span> + </span>').addClass('plus');
    $('.product-tree li').has('ul').addClass('has-child')
    plus.prependTo('.has-child');
    $(".has-child").hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    $('.has-child ul').hide();
    $('.product-tree input:checked').each(function(){
        $(this).parent().show(); // Does nothing?
        $(this).parent().parent().show(); // Will show Sub Product 1 when Main product 1 is clicked
        $(this).parent().parent().parent().show(); // Does nothing
    });

    $('.has-child .plus').click(function(){
        $(this).parent().children("ul").toggle('slow');
    });

});
</script>
4

2 に答える 2

0

これは機能しますか？

if($('.product-tree').find('input').is(':checked')) {
     $(this).parents().show();
}
于 2013-08-27T21:16:48.277 に答える
0

これを変える：

$('.product-tree input:checked').each(function(){
    $(this).parent().show(); // Does nothing?
    $(this).parent().parent().show(); // Will show Sub Product 1 when Main product 1 is clicked
    $(this).parent().parent().parent().show(); // Does nothing
});

に：

$('.product-tree input:checked').each(function(){
    $(this).parents().show(); // show all parent elements
});
于 2013-08-27T21:15:44.340 に答える