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

Question

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

• 项目1
• 项目2
  • superitem1
    • 精英1
    • 精英2
  • superitem3
  • superitem4
• 项目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 的想法......我应该尝试修改他的答案吗？我对 SO 的这个主题没有那么丰富的经验。

不过，这是我的回答：

$('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

Answer 2

可以连续使用.parent()函数。

例如如果你想让它在点击时记录路径：

$("#eliteitem2").click(function() {

  var path = $(this).attr("id");

  while($(this).parent() > -1) {
    path.prepend($(this).parent().attr("id")+"/");
  }

  console.log(path);
});

应该做的伎俩。

Answer 3

你需要上去不止一位家长。

ul -> li -> ul -> li

文本在lis 中。您点击了li，父级是ul，其父级是li，并带有您想要的文本。

所以如果clickedElement 是您点击的li，您需要这样做

$(clickedElement).parent().parent().text();

获取父级的文本，依此类推，直到到达最后一个父级。

如果这没有帮助，带有更多代码来解释您的场景的 JSFiddle（或类似的东西）可能会有所帮助。

编辑：将新代码添加到问题中，获取文本，尝试：

$(clickedElement).parent().parent().children(".expandable").children(".foldername")