0

私は次のようなHTML構造を持っています：

<ul id="mainMenu">
    <li class="itm_1">
        Text...
    </li>
    <li class="itm_2">
        Text...
        <ul>
            <li class="itm_3">
                Text...
                <ul>
                    <li class="itm_4">
                        Text...
                    </li>
                    <li class="itm_5">
                        Text...
                    </li>
                </ul>
            </li>
            <li class="itm_6">
                Text...
            </li>
        </ul>
    </li>
</ul>

私がやりたいのは、アクティブな要素にクラスを追加してから、同じパス内の他の要素にクラスを追加して、次の例のような別のクラスを追加することです。

<ul id="mainMenu">
    <li class="itm_1">
        Text...
    </li>
    <li class="itm_2 ANCESTOR_ACTIVE">
        Text...
        <ul>
            <li class="itm_3 ANCESTOR_ACTIVE">
                Text...
                <ul>
                    <li class="itm_4">
                        Text...
                    </li>
                    <li class="itm_5 ACTIVE">
                        Text...
                    </li>
                </ul>
            </li>
            <li class="itm_6">
                Text...
            </li>
        </ul>
    </li>
</ul>

アクティブと見なされる要素を見つけてアクティブのクラスを追加することはできますが、同じパスのアクティブな要素の上の要素にancestor_activeクラスを追加する方法が見つかりません。

今のところ私のスクリプトには次のコードがあります：

<?php
    $current_page = $page_id;    // Lets say is 5
?>
<script type="text/javascript">
    var cp = {
        p : <?php echo $current_page; ?>
    };

    jQuery(document).ready(
        function($)
        {
            $('.itm_' + cp.p).addClass('active');
        }
    );
</script>

注：ネストされた配列は、常に同じ深さであるとは限りません。ネストされたリストが他にある場合もあれば、サブリストがない場合もあります。トップ要素#mainMenuに移動し、jQueryを使用して同じパスの各li要素にクラス「ancestor_active」を追加するにはどうすればよいですか。

4

2 に答える 2

3

parents()すべての一致についてツリーを検索するために使用します

$('#mainMenu li').click(function(){
  $('#mainMenu li.active').removeClass('active');
   $(this).addClass('active').parents('li').addClass('active');
});

APIリファレンスhttp://api.jquery.com/parents/

于 2013-02-02T07:58:35.987 に答える
1

親関数を使用できると思います

小さな例を編集する

<script type="text/javascript">
    var cp = {
        p : 4
    };
    jQuery(document).ready(
        function($) {
            var c = $('.itm_' + cp.p)
        c.addClass('active')
        set_ancestor_active(c.parent())
        }
    );
function set_ancestor_active(c) {
   while (c.is('li') || c.is('ul')) {
    if (c.is('li'))
         c.addClass('ancestor_active')
    c = c.parent()
   }
}
</script>
于 2013-02-02T07:46:45.843 に答える