javascript - 在 jquery 中获取 和 的层次位置

Question

我正在尝试使用 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" 或至少类似的东西。任何想法将不胜感激。

Answer 1

类似于:

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

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

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

如果文本直接跟在开头 <li> 之后标签。

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

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

引用: map , parents , parentsUntil , contents , get