在jquery中获取

和
• 的层次位置

我试图使用 jquery 获取 li 的嵌套深度，然后创建一个包含 li 和数字的字符串，了解它们的嵌套深度。例如：

<ul>
    <li>
    MenuItem1
    </li>

    <li>
    MenuItem2
        <ul>
            <li>
            SubItemA
            </li>
        </ul>
    </li>

    <li>
    MenuItem3
    </li>
</ul>

应该产生"0:MenuItem1 0:MenuItem2 1:SubItemA 0:MenuItem3"或者至少是类似的东西。任何想法将不胜感激。

就像是：

var text = $('li').map(function() {
     var num_parents = $(this).parents('ul').length;
     // or .parentsUntil('#someId', 'ul') if you have `$('#someID li')` above
     return (num_parents - 1) + ': ' + $(this).contents().map(function() {
         if(this.nodeType === 3) {
             return $.trim(this.nodeValue);
         }
         return null;
     }).get().join('');
}).get().join(' ');

DEMO http://jsfiddle.net/3cXJ8/

根据您的实际 HTML 结构，您还可以简化检索文本的过程li元素到

return (num_parents - 1) + ': ' + $.trim(this.firstChild);

如果文本直接跟在开头后面<li> tag.

或者如果每个标签内还有其他标签li元素（如span or div）并且您也想获取它们的内容，您可以克隆当前节点并删除所有ul后人：

var text = $.trim($(this).clone().find('ul').remove().end().text());
return (num_parents - 1) + ': ' + text;

参考： map http://api.jquery.com/map/, parents http://api.jquery.com/parents, parentsUntil http://api.jquery.com/parentsUntil/, contents http://api.jquery.com/contents/, get http://api.jquery.com/get/