jquery - Jquery 索引不适用于子节点

Question

我想索引文档中的所有内容，然后通过其索引调用它。的HTML：

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

获取索引的警报：

alert('Index: ' + $('#foo').index());

问题是它会同时提醒0和 的ul号码#foo。我理解这一点的逻辑，但我需要它们按顺序排列，所以ul应该计算0并且#foo应该是1。

我可以尝试什么来获得这种类型的索引？我试过prevAll()了，但结果是一样的。

PS 请不要这只是一个例子，实际上代码应该适用于大型文档。

示例代码

Answer 1

你可以这样做：

$.fn.tree_index = function() {
    var index = -1;

    $(this).parents().each(function() {
        index += $(this).index() + 1;
    });

    return index;
}

alert('Index: ' + $('#foo').tree_index());

Answer 2

index()没有参数将在其父元素中查找元素的索引。但是你可以用一个参数来调用它来超越它。

假设我们正在研究您的示例

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

解决方案可能如下所示：

$('ul, li').index($('ul'))   // => 0
$('ul, li').index($('#foo')) // => 1
$('ul, li').index($('#bar')) // => 2

您甚至可以以编程方式执行此操作：

$('ul, li').each(function(i) {
  console.log(this.tagName + (!!this.id ? " #" + this.id : "") + " = " + i)
})

// UL     => 0
// LI#foo => 1
// LI#bar => 2

请注意，这$(selector).index(element)将返回与element匹配的节点内的索引selector。

希望有帮助。