jQuery - 获取嵌套列表子项的路径

Question

我的网页中有下一个列表:

• 项目1
• 项目2
  • super 项目1
    • 精英项目1
    • 精英2
  • super 项目3
  • super 项目4
• 项目3
• 项目4

现在我希望 jQuery 返回从 UL 到 LI 的完整路径
例子:如果我点击eliteitem2它将返回:item2/superitem1/eliteitem2


我已经尝试过多种方法:

$(this).parent().text(); <

但我无法让它工作，我不需要只适用于 Eliteitem2 的功能，
它应该适用于任何 LI 并返回整个路径...

//HTML
<ul class="list-unstyled">
    <li id="mapdb1">
        <a class="expandable">
            <span class="foldername one">mapdb1</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
            <li id="somemap">
                <a class="expandable">
                    <span class="foldername two">somemap</span>
                    <span class="glyphicon glyphicon-play"></span>
                </a>
            </li>
        </ul>
    </li>
    <li id="mapdb2">
        <a class="expandable">
            <span class="foldername one">mapdb2</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
        <li id="mapjeinner">
            <a class="expandable"><span class="foldername two">mapjeinner</span> <span class="glyphicon glyphicon-play"></span></a>
            <ul class="list-unstyled">
                <li id="anderemap">
                    <a class="expandable">
                        <span class="foldername three">anderemap</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                </li>
            </ul>
        </li>
        <li id="mapjeinner2">
            <a class="expandable">
                <span class="foldername two">mapjeinner2</span> 
                <span class="glyphicon glyphicon-play"></span>
            </a>
            <ul class="list-unstyled">
                <li id="nogmapje">
                    <a class="expandable">
                        <span class="foldername three">nogmapje</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                    <ul class="list-unstyled">
                        <li id="supermapp">
                            <a class="expandable">
                                <span class="foldername four">supermapp</span> 
                                <span class="glyphicon glyphicon-play"></span>
                            </a>
                            <ul class="list-unstyled">
                                <li id="eenhelelangemap">
                                    <a class="expandable">
                                        <span class="foldername five">eenhelelangemap</span> 
                                        <span class="glyphicon glyphicon-play"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
             </ul>
          </li>
       </ul>
    </li>             
</ul> 






//JQUERY
$('.expandable').click(function() {
    //This is just some small thing i tried.
    //I tried alot of things but can't figure it out.
    //If i click 'supermapp'
    //path should return: 'mapdb2/mapjeinner2/nogmapje/supermapp'

    var path = $( this ).parent().html();
    console.log('path');     
});

http://jsfiddle.net/M73XQ/

Answer 1

我承认，这个答案是基于@boris的想法......我应该尝试修改他的答案吗？我对这个主题没有那么丰富的经验。

但是，这是我的答案:

$('li').click(function(e) {

    var path = [];
    var el = $(this);

    do {
        path.unshift(el.attr("id"));
        el = el.parent().closest('li');
    } while(el.length != 0);

    alert(path.join('/'));
    e.stopPropagation();
});

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

编辑:与上面相同的JS - 你的HTML:

$('.expandable').click(function(e) {

    var path = [];
    var el = $(this).closest('li');

    do {
        path.unshift(el.attr("id"));
        el = el.parent().closest('li');
    } while(el.length != 0);

    alert(path.join('/'));
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-unstyled">
    <li id="mapdb1">
        <a class="expandable">
            <span class="foldername one">mapdb1</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
            <li id="somemap">
                <a class="expandable">
                    <span class="foldername two">somemap</span>
                    <span class="glyphicon glyphicon-play"></span>
                </a>
            </li>
        </ul>
    </li>
    <li id="mapdb2">
        <a class="expandable">
            <span class="foldername one">mapdb2</span> 
            <span class="glyphicon glyphicon-play"></span>
        </a>
        <ul class="list-unstyled">
        <li id="mapjeinner">
            <a class="expandable"><span class="foldername two">mapjeinner</span> <span class="glyphicon glyphicon-play"></span></a>
            <ul class="list-unstyled">
                <li id="anderemap">
                    <a class="expandable">
                        <span class="foldername three">anderemap</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                </li>
            </ul>
        </li>
        <li id="mapjeinner2">
            <a class="expandable">
                <span class="foldername two">mapjeinner2</span> 
                <span class="glyphicon glyphicon-play"></span>
            </a>
            <ul class="list-unstyled">
                <li id="nogmapje">
                    <a class="expandable">
                        <span class="foldername three">nogmapje</span> 
                        <span class="glyphicon glyphicon-play"></span>
                    </a>
                    <ul class="list-unstyled">
                        <li id="supermapp">
                            <a class="expandable">
                                <span class="foldername four">supermapp</span> 
                                <span class="glyphicon glyphicon-play"></span>
                            </a>
                            <ul class="list-unstyled">
                                <li id="eenhelelangemap">
                                    <a class="expandable">
                                        <span class="foldername five">eenhelelangemap</span> 
                                        <span class="glyphicon glyphicon-play"></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
             </ul>
          </li>
       </ul>
    </li>             
</ul>

PS:需要 jQuery ≥ 1.3.0