Индекс элемента коллекции

[likdike]

Доброй ночи, форумчане. Есть элемент div с id = "unique", в него вложено много элементов без id, но с class = "exemplar". Пользователь кликает по одному из этих элементов. Внимание вопрос: Как узнать по какому именно элементу кликнул пользователь? А лучше всего как узнать индекс этого элемента из коллекции элемента id = "unique".

[s0rr0w]

Доброй ночи, форумчане. Есть элемент div с id = "unique", в него вложено много элементов без id, но с class = "exemplar". Пользователь кликает по одному из этих элементов. Внимание вопрос: Как узнать по какому именно элементу кликнул пользователь? А лучше всего как узнать индекс этого элемента из коллекции элемента id = "unique".

Вам матчасть или готовый код нужен?

[likdike]

Вам матчасть или готовый код нужен?

Это стеб?

var exs = document.getelementbyclass('exemplar'); // как я понимаю вернет массив объектов которые имеют класс exemplar.

exs ставим обработчик события onclick.

верно?

как сделать так чтобы функция которая вызывается при наступлении события выводила индекс элемента в коллекции?

[SelenIT]

Пользователь кликает по одному из

event.target (ну и window.event.srcElement в старых IE, "для баланса") не помогут?

[s0rr0w]

Это стеб?

Нет, это нормальный вопрос, потому что зачастую требуют от нас именно готового решения.

var exs = document.getelementbyclass('exemplar'); // как я понимаю вернет массив объектов которые имеют класс exemplar.

exs ставим обработчик события onclick.

верно?

как сделать так чтобы функция которая вызывается при наступлении события выводила индекс элемента в коллекции?

В направлении вы верны, не верны в реализации. getElementsByClass - правильная запись. Вернет она действительно коллекцию.

Далее, путем перебора каждого элемента коллекции (помогут for, while, do while), присваиваете каждому элементу обработчик для события "click". Тут поможет addEventListener. А вот дальше будет сложнее.

Сложность определения индекса в том, что getElementsByClass, вызванный у документа, вернет все элементы с указанным классом, вне зависимости от того, где они расположены. И если у вас вдруг, чисто случайно, появится div с id="unique2", то в коллекцию попадут и эти элементы тоже. И, тогда, чтобы определить позицию относительно #unique2, придется перебирать элементы именно этого контейнера.

[alexandr_v-vich]

Сложность определения индекса в том, что getElementsByClass, вызванный у документа, вернет все элементы с указанным классом, вне зависимости от того, где они расположены

Так на обработчике ему и выдаст элемент, который нужен со своим индексом.

getElementsByClass - правильная запись

Кстати, если не ошибаюсь, так - getElementsByClassName

Edited March 13, 2012 by alexandr_v-vich

[likdike]

Пользователь кликает по одному из

event.target (ну и window.event.srcElement в старых IE, "для баланса") не помогут?

как вариант. но хотелось бы индекс элемента коллекции.

Это стеб?

Нет, это нормальный вопрос, потому что зачастую требуют от нас именно готового решения.

var exs = document.getelementbyclass('exemplar'); // как я понимаю вернет массив объектов которые имеют класс exemplar.

exs ставим обработчик события onclick.

верно?

как сделать так чтобы функция которая вызывается при наступлении события выводила индекс элемента в коллекции?

В направлении вы верны, не верны в реализации. getElementsByClass - правильная запись. Вернет она действительно коллекцию.

Далее, путем перебора каждого элемента коллекции (помогут for, while, do while), присваиваете каждому элементу обработчик для события "click". Тут поможет addEventListener. А вот дальше будет сложнее.

Сложность определения индекса в том, что getElementsByClass, вызванный у документа, вернет все элементы с указанным классом, вне зависимости от того, где они расположены. И если у вас вдруг, чисто случайно, появится div с id="unique2", то в коллекцию попадут и эти элементы тоже. И, тогда, чтобы определить позицию относительно #unique2, придется перебирать элементы именно этого контейнера.

что как правильно пишется не столь важно. синтаксис я могу посмотреть в справочнике. Проблему с id = "unique2" я прекрасно понимаю. Но всё таки скажите возможно ли узнать индекс элемента коллекции по которому кликнул пользователь исходя из родных свойств и методов javascript и DOM?

[alexandr_v-vich]

Но всё таки скажите возможно ли узнать индекс элемента коллекции по которому кликнул пользователь исходя из родных свойств и методов javascript и DOM?

Так так и написали. Цикл + обработчик = элемент, по которому кликнул. Куда же роднее?

Как пример:

var arr = document.getElementsByClassName("ClassName");
for(var i=0; i<arr.length; i++) {
  arr[i].addEventListener("click", function() {
    alert(i);
  });
}

Дальше уж разберёте, думаю.

Edited March 14, 2012 by alexandr_v-vich

[likdike]

var arr = document.getElementsByClassName("ClassName"),
    i;
for (i = 0; i < arr.length; i++) {
    arr[i].num = i;
    arr[i].addEventListener("click", function () {
        alert(this.num);
  }, false);
}

верно? если добавить к каждому элементу коллекции свойство num?

Edited March 14, 2012 by likdike

[s0rr0w]

var arr = document.getElementsByClassName("ClassName");
for(var i=0; i<arr.length; i++) {
  arr[i].addEventListener("click", function() {
    alert(i);
  });
}

Дальше уж разберёте, думаю.

Думаю, что все элементы будут выводить одно и то же.

верно? если добавить к каждому элементу коллекции свойство num?

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

Нужно более точно знать, для чего будет эта нумерация использоваться

[br3t]

Для jQuery eсть index()

[nerv]

Как узнать по какому именно элементу кликнул пользователь? А лучше всего как узнать индекс этого элемента из коллекции элемента id = "unique".

Данная информация содержится в объекте события.

Получение объекта события

Делегирование событий