Question

我为类别及其子类别生成了一个树。树的深度可以是 n 生成的html代码是：

<ol>
    <li>Category1</li>
    <li>
        Category2
        <ol>
            <li>SubCat21</li>
            <li>SubCat22</li>
            <li class='current-cat'>
                SubCat23
                <ol>
                    <li>SubSubCat231</li>
                    <li>SubSubCat232</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        Category3
        <ol>
            <li>SubCat31</li>
            <li>SubCat32</li>
            <li>
                SubCat33
                <ol>
                    <li>SubSubCat331</li>
                    <li>SubSubCat332</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

如上所示，<li> class='current-cat'是我当前的类别页面。现在使用CSS我将其子<ol>显示为：

ol li>ol{display:none;}
ol li.current-cat>ol{display:block;}

但如果我目前的类别深入，那么我无法查看当前类别及其子类别。
因此，我需要一种方法让父<li>向<ol> <li> class='current-cat'人显示{。}}。

我试过jquery，但没有取得任何成功。

JSFiddle for above tree structure

Answer 1

使用.ParentsUntil()您可以选择元素

$('li#child').ParentsUntil('ol#root', 'li');

修改

在JS中：

$('ol#root li.current-cat').each(function (index) { debugger; $(this).parentsUntil('dt', 'ol').css({ display: 'block' }); });

或可以使用此fiddle

Answer 2

我觉得接受的答案太复杂了，为什么不使用parents()？

JS：

$('.current-cat').parents('ol').addClass('current');

CSS：

.current {
  display: block;
}

移动current-cat课程来玩它 - example

如何选择嵌套列表中的所有父<li> </li>

2 个答案: