Question

我有类似以下的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>

将被视为活动的元素我可以找到它并添加active类，但是我找不到在同一路径中的active元素上方的元素中添加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将类“ancestor_active”添加到同一路径中的每个li元素？

Answer 1

使用parents()查找所有匹配的树

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

API参考http://api.jquery.com/parents/

Answer 2

你可以使用parent功能，我想

编辑一个小例子

<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>

反向树扫描，是否可能？

2 个答案: