Как узнать место в массиве выбранного элемента?

Question

[Ingernirated]

Подскажите, как узнать место в массиве одного из элементов?
Например

<p class="hello">rock</p>
<p class="hello">spais</p>
<p class="hello">boris</p>

Как при нажатии на один из них узнать, который он в списке массива?

Answer 1

[Ростислав Игнатенко]

Если чистый js то посмотрите indexOf
Если на jQuery, тогда index
Вот пример на jQuery https://jsfiddle.net/p7f6dboq/7/

Comments

[Ingernirated]

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

Answer 2

[Сергей Соколов]

Без jQuery:

var i, collection = document.getElementsByClassName('hello');
for( i = 0; i < collection.length; i++) {
  collection[i].addEventListener('click', onClick);
}

function onClick() {
  var i, index = -1;
	for(var i=0; i < collection.length; i++) {
		if( this === collection[i]) {
			index = i;
			break;
		}
	}
	if( !!~index) alert(index);
}

fiddle

Comments

[Ingernirated]

скажи пожалуйста
зачем индексу задавать значение?
index = -1;
с чем тут идёт сравнение, что здесь подразумеваетthis?
if( this === collection[i])
и проверка с !!~, это что?
if( !!~index)

[Сергей Соколов]

Ingernirated: -1 это значение, которое точно не выпадет при переборе от 0 в плюс. Чтобы отличать найденную позицию от случая, где позиция так и не была обнаружена. Для этого же применяется конструкция !!~index, которая приобретает значение false только когда index = -1 и true во всех остальных случаях, включая index = 0

this в вызванной по клику функции имеет значение кликнутого элемента.

[Ingernirated]

Сергей Соколов: а что за this кроется значение?
какой параметр сравнивается?
или любое событие над этим элементом будет === this?

[Ingernirated]

Сергей Соколов: подскажи пожалуйста статью про этот момент с this и событием, не встречал ещё такого

[Ingernirated]

MaxKorz: спасибо!

[Сергей Соколов]

Ingernirated: this будет непосредственно сам DOM объект, весь HTML-элемент, по которому кликнули. В вашем случае это один из параграфов со всеми атрибутами и внутренним содержимым.

[Ingernirated]

Сергей Соколов: а что ещё можно полезного из this в событии использовать?
а то не нашел никаких свойств, только получение индекса твои способом

[Сергей Соколов]

Ingernirated: напр. фон ему сделать заметным