Question

如果我有一个场景，用户可以点击像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 =“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

我不知道这是否比布拉德的方法更有效率，但我之前开始研究这个问题，它一直困扰着我，直到我完成它。

jsFiddle example

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

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

2 个答案: