Форум

-=1100=- · #11 (**permalink**) 20.12.2011, 14:51

как мне узнать позицию элемента li (на какой из 5 элементов я нажал)

ksa · #12 (**permalink**) 20.12.2011, 14:52

nerv_, таки ты так же не решил задачку автора...

Ты не вывел порядковый номер элемента в списке.

Вот смотри, я немного поменял содержимое

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin:0px; }
        </style>
        <script type="text/javascript">
			function l(event) {
				var el = event.target || event.srcElement;
				alert(el.innerHTML);
            }
        </script>
    </head>
    <body>
		<ul onclick="l(event)">
		 <li>select *</li>
		 <li>select *</li>
		 <li>select *</li>
		 <li>select *</li>
		 <li>select *</li>
		</ul>
    </body>
</html>

И уже не понятно что ты там нашел...

ksa · #13 (**permalink**) 20.12.2011, 14:54

Сообщение от -=1100=-

как мне узнать позицию элемента li (на какой из 5 элементов я нажал)

К тебе в функцию клика приходит ссылка на элемент (this)... Остаётся только сравнить твой это элемент или нет.
Если твой - вывести значение итерационной переменной и закончить таки цыкл.

-=1100=- · #14 (**permalink**) 20.12.2011, 14:55

if (ul.getElementsByTagName('li')[xx]==this.???){...}

Я хотя бы в правильную сторону мыслю?

ksa · #15 (**permalink**) 20.12.2011, 14:56

nerv_ молодец уже в том, что делает полные тестовые примеры, ане как -=1100=- какие-то огрызки...

ksa · #16 (**permalink**) 20.12.2011, 14:57

Сообщение от -=1100=-

Я хотя бы в правильную сторону мыслю?

Сторона правильная.

А вот синтаксис хромает на все четыре копыта...

И над оптимизацией нужно работать...

nerv_ · #17 (**permalink**) 20.12.2011, 15:01

Сообщение от -=1100=-

Я хотя бы в правильную сторону мыслю?

В какую сторону мыслить, Вам уже давно сказали

Сообщение от -=1100=-

Как узнать где остановиться? (в какой ты кубик пальцем ткнул)

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

Таки сравнивать каждый кубик с "моим". В JS есть this...

ksa, да) Тот вариант приемлем только в рамках обозначенного ТС контекста.

nerv_ · #18 (**permalink**) 20.12.2011, 16:00

у меня получилось так

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin:0px; }
        </style>
        <script type="text/javascript">
            function l(event) {
                var elLi = event.target || event.srcElement;
                var elUl = elLi.parentNode.childNodes;

                for(var j = 0, i = 0; j < elUl.length; j++) {
                    if(elUl.item(j).nodeName === "LI") {
                        i++;
                        if(elUl.item(j) === elLi) break;
                    }
                }
                alert(i);
            }
        </script>
    </head>
    <body>
        <ul onclick="l(event)">
         <li>select *</li>
         <li>select *</li>
         <li>select *</li>
         <li>select *</li>
         <li>select *</li>
        </ul>
    </body>
</html>

ksa · #19 (**permalink**) 20.12.2011, 16:15

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

у меня получилось так

По-мне так немного замудрёно ты сделал... Как вариант:

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function l(Obj,event) {
	var elLi = event.target || event.srcElement;
	var o = Obj.getElementsByTagName('li');
	for (var j = 0; j < o.length; j++) {
		if(o[j] === elLi) {
			alert(j+1);
			break;
		}
	}
}
</script>
</head>
<body>
<ul onclick="l(this,event)">
	<li>select *</li>
	<li>select *</li>
	<li>select *</li>
	<li>select *</li>
	<li>select *</li>
</ul>
</body>
</html>

nerv_ · #20 (**permalink**) 20.12.2011, 16:49

ksa, спасибо! Понял, где можно было упростить. Почему-то эта запись

var elUl = elLi.parentNode.childNodes;

в FF помимо Li влючала еще элементы (всего 11 для списка из 5).
Сделал по Вашему примеру.

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin:0px; }
        </style>
        <script type="text/javascript">
            function l(event) {
                var x = event.target || event.srcElement;
                var j = x.parentNode.getElementsByTagName('li');
                for(var i = 0; i < j.length; i++) {
                    if(j[i] === x) break;
                }
                alert(++i);
            }
        </script>
    </head>
    <body>
        <ul onclick="l(event)">
         <li>select *</li>
         <li>select *</li>
         <li>select *</li>
         <li>select *</li>
         <li>select *</li>
        </ul>
    </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript