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

Question

如果我有这样一个场景，用户可以单击一个像cat1-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 = "Cat 1/Cat 1-1/Cat 1-2|Cat 2/Cat 2-1"；

Answer 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();
});

Answer 2

我不知道这是否比Brad的方法更有效，但我很早就开始做这件事，它一直困扰着我，直到我完成它。

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 = [];
    }
});