向后遍历有序列表，返回每个li文本

Traversing the Ordered List backwards returning each li text

本文关键字：返回 li 文本 列表 遍历      更新时间：2023-09-26

如何遍历有序列表并返回文本，如果我有一个场景，用户可以单击像Cat 1-2这样的li元素，它将所有父li的文本返回到字符串或数组中。如果是一个数组，我可以反向排序，但最终我需要它是一个字符串。

的例子:

<ul>
    <li>Cat 1
        <ul>
            <li>Cat 1-1
                <ul>
                    <li>Cat 1-2</li>
                </ul>
            </li>
         </ul>
    </li>
    <li>Cat 2
        <ul>
            <li>Cat 2-1
                <ul>
                    <li>Cat 2-2</li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

如果点击Cat 1-2，期望的结果将是:str = "Cat 1/Cat 1-1/Cat 1-2";

如果点击Cat 2-1，期望的结果将是:str = "Cat 2/Cat 2-1";

我想要的是这上面的复选框，我可以把所有的选择连接到一个字符串层次结构，像:str = "猫1/猫1 - 1/猫1 - 2 |猫2/猫2 - 1";

这里;我将展示一个简单的方法让你开始，然后你可以找到一个更好的方法(也许使用textContent)…

$('li').click(function(e){
    var parents = $(this).add($(this).parents('li'))
        .map(function(){
            return $(this).clone().children().remove().end()
                   .text().replace(/'r|'n|^'s+|'s+$/g,'');
        })
        .toArray().join('/');
    alert(parents);
    e.stopPropagation();
});

我不知道这是否比Brad的方法更有效，但我更早开始研究这个方法，它一直困扰着我，直到我完成它。

<<p> jsFiddle例子/strong> 
var ary = [];
$('li').click(function (e) {
    ary.push($.trim($(this).clone()
        .children()
        .remove()
        .end()
        .text()));
    if ($(this).parents('ul').parent('li').length == 0) {
        console.log(ary.reverse().join('/'));
        ary = [];
    }
});
相关文章：