如何text（）和连接嵌套列表的值

Question

我尝试获取嵌套列表的值并在每次单击时将它们连接起来：

<ul>
    <li>item1</li>
    <li>item2
        <ul>
            <li>superitem1
                <ul>
                    <li>eliteitem1</li>
                    <li>eliteitem2</li>
                </ul>
            </li>
            <li>superitem3</li>
            <li>superitem4</li>
        </ul>
    </li>
    <li>item3</li>
    <li>item4</li>
</ul>

这是我尝试的脚本，但它不起作用：

$(document).ready(function(){
            var string= "You clicked."
            $("li").click(function(){
                if($(this).children().length ==0){
                    var val = $(this).text().trim()
                    var final1 =  string+val
                    alert (final1 )
                }
                if($(this).children().length > 1){
                    var father1= $(this).clone().children().remove().end().text().trim()
                    var final2 =  string+father1
                    alert (final2)
                }
                $(this).on('click', '> *', function(event){ //Click of childrens
                        var son= $(event.target).text().trim()
                        var final3 = final2+"."+son
                        event.stopImmediatePropagation()
                        alert (final3)
                })

            })
        })

我需要将每次点击的价值与其父/子连接起来。 例如，如果单击eliteitem1 make alert并显示下一条消息：

alert ("You clicked.item2.superitem1.eliteitem1)

Answer 1

我为你写了一个例子。

$('li').click(function(e) {
    var path = [];
    var el = $(this);
    do {
        path.unshift(el.clone().children().remove().end().text().trim());
        el = el.parent().closest('li');
    } while(el.length != 0);
    console.log(path.join('/'));
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>item1</li>
    <li>item2
        <ul>
            <li>superitem1
                <ul>
                    <li>eliteitem1</li>
                    <li>eliteitem2</li>
                </ul>
            </li>
            <li>superitem3</li>
            <li>superitem4</li>
        </ul>
    </li>
    <li>item3</li>
    <li>item4</li>
</ul>