Как определить положение 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>

Мой способ старой школы заключался в присвоении каждому элементу списка и секции идентификатора, такого как "li1", "li2" и т. Д. И "section1", "section2" и т. Д. Затем я бы проанализировал целое число из идентификатор элемента, по которому щелкнули, и манипулируйте соответствующим разделом.

Есть ли способ определить это без дополнительных атрибутов id? Например, если я щелкаю третий элемент списка и знаю, что это третий элемент, я могу использовать document.querySelector('div:nth-child(3)') для управления третьим разделом содержимого. Мой вопрос заключается в том, как узнать, что это был 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
    }
}

Это кажется довольно дорогой операцией по сравнению с использованием только идентификаторов, особенно если было гораздо больше элементов списка и разделов контента. Я надеюсь, что есть некоторый атрибут узла, который даст мне правильную позицию DOM, которую я еще не нашел.

Современные браузерные решения приветствуются. Спасибо.

Answer 1

Я бы использовал что-то вроде:

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

Скрипка: 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 по клику. Скрипка: http://jsfiddle.net/UnrCt/

Answer 2

Если вы можете использовать jQuery: $(elem).index()

Answer 3

Так что я понятия не имею, что вы здесь делаете, но должен быть более ориентированный на данные подход к этому.Как и li, и раздел ссылаются на один и тот же Продукт или Персона или что-то еще, так что вы можете найти их по этой ссылке.

В противном случае вы можете использовать метод previousElementSibling для подсчета вашего местоположения, например:

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

gl

Answer 4

Обновление 2016

Что ж, я снова столкнулся с этой проблемой почти 5 лет спустя, только на этот раз я использовал гораздо более простое решение с использованием встроенного метода Array:

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