单击时如何确定一系列元素中元素的 DOM 位置

Question

在这个场景中，我有一系列列表项，每个列表项都有一个相应的内容区域。当点击列表项时，对应的内容区域被操纵（即，如果点击第一列表项，则将操纵第一内容部分）。

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

<div>
    <section>Content section</section>
    <section>Content section</section>
    <section>Content section</section>
</div>

我的老派做法是给每个列表项和部分一个 id，例如“li1”、“li2”等和“section1”、“section2”等。然后我将解析 id 中的整数被单击的元素并操作相应的部分。

有没有一种方法可以确定这一点而不需要额外的 id 属性？例如，如果我单击第三个列表项并知道这是第三个，我可以使用 document.querySelector('div:nth-child(3)') 来操作第三个内容部分。我的问题是如何知道它是开始单击的系列中的第三个元素。

我首先想到的解决方案是这样的：

var target = e.target;
var parent = e.target.parentNode;

for (var i in parent.childNodes) {
    if (parent.childNodes[i].nodeType == 1 && parent.childNodes[i] == target) {
        // found it... i+1
    }
}

与仅使用 ID 相比，这似乎是一个相当昂贵的操作，特别是如果有更多的列表项和内容部分。我希望有一些节点属性可以为我提供我尚未找到的正确 DOM 位置。

欢迎现代纯浏览器解决方案。

Answer 1

所以我不知道你在这里做什么，但必须有一种更加面向数据的方法。
就像 li 和该部分都引用相同的产品或人员或其他内容一样，因此您可以通过该引用找到它。

否则你可以使用 previousElementSibling 方法来计算你的位置，就像这样

var position = function(el) {
  var count = 1;
  for(var cur = el.previousElementSibling; 
          cur !== null; cur = cur.previousElementSibling) {
    count++;
  }
  return count;
};

gl

Answer 2

我会使用类似的东西：

var target = e.target,
    i = 0;
while(target = target.previousSibling) {
    i += target.nodeType == 1;
}
alert('you clicked on '+i);

Fiddle: http://jsfiddle.net/K5Qg9/1/

你还可以尝试使用数据库或将内容分配给元素 expano onload：

var elems = document.getElementsByTagName('li'),
    i=0;
for(; elems[i]; i++) {
    elems[i].rel = i;
}

然后只需获取 e.target.rel onclick。小提琴：http://jsfiddle.net/UnrCt/

Answer 3

如果您可以使用 jQuery：$(elem).index()

Answer 4

更新 2016

好吧，近 5 年后我再次遇到了这个问题，只是这次我使用了一个更简单的解决方案，使用内置的数组方法：

var index = Array.prototype.indexOf.call(event.target.parent.children, event.target);