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

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我已经展示了它的 child <ol>作为:

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

但是，如果我当前的类别很深入，那么我将无法查看当前类别及其子类别。
所以我需要一个出路让 parent <li>给 child 看<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