Форум

root-andrey · #1 (**permalink**) 17.08.2011, 17:33

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

Помогите разобратся.
Зная на каком елементе li произошел клик,как узнать его индекс расположения в родителе.

walik · #2 (**permalink**) 17.08.2011, 18:19

К примеру проходишь циклом по всем элементам, и каждый с кликнутым.

melky · #3 (**permalink**) 17.08.2011, 19:28

на пример

выводит позицию(индекс) кликнутого li в списке ul.. не забываем, что нумерация в программировании начинается с нуля

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<script>
document.getElementsByTagName("ul")[0].onclick = function(e){
    alert( [].indexOf.call(this.children, (e ? e.target : event.srcElement) ) );
};
</script>

root-andrey · #4 (**permalink**) 17.08.2011, 23:44

Спасибо большое за пример!

Gvozd · #5 (**permalink**) 18.08.2011, 02:27

melky,
интересный хак.
Есть ли какие-то противопоказания, по поводу кроссбразуерности?

float · #6 (**permalink**) 18.08.2011, 04:02

ложечка дёгтя

:

<ul>
<li>1</li>
<li><span>2</span></li>
<li>3</li>
<li>4</li>
</ul>

<script>
document.getElementsByTagName("ul")[0].onclick = function(e){
    alert( [].indexOf.call(this.children, (e ? e.target : event.srcElement) ) );
};
</script>

Octane · #7 (**permalink**) 18.08.2011, 06:07

Сообщение от Gvozd

Есть ли какие-то противопоказания, по поводу кроссбразуерности?

Хотел написать, что IE7 выдаст ошибку "Предполагается наличие объекта JScript", по аналогии с Array.prototype.slice.call(nodeList), но потом вспомнил, что в IE7,8 нет Array.prototype.indexOf

monolithed · #8 (**permalink**) 18.08.2011, 09:29

к примеру в jQuery можно так:

$.fn.index.call(this.children, event.target);

root-andrey · #9 (**permalink**) 18.08.2011, 11:37

Сообщение от melky

на пример

выводит позицию(индекс) кликнутого li в списке ul.. не забываем, что нумерация в программировании начинается с нуля

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<script>
document.getElementsByTagName("ul")[0].onclick = function(e){
    alert( [].indexOf.call(this.children, (e ? e.target : event.srcElement) ) );
};
</script>

в IE не работает

nikita.mmf · #10 (**permalink**) 18.08.2011, 13:52

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li><i><b>3</b></i></li>
		<li>4</li>
	</ul>
	<script>
		document.getElementsByTagName("ul")[0].onclick = function( e ) {
			var target = e ? e.target : event.srcElement;
			while ( target != this && target.nodeName.toLowerCase() != "li"  ) {
				target = target.parentNode;
			}
			if ( target == this ) { return; }
			var index = 0;
			while ( (target = target.previousSibling) ) {
				if ( target.nodeType === 1 ) {
					index++;
				}
			}
			alert ( index )
		};
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript