Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как узнать положение элемента (https://javascript.ru/forum/dom-window/24174-kak-uznat-polozhenie-ehlementa.html)

-=1100=- 20.12.2011 14:51
как мне узнать позицию элемента li (на какой из 5 элементов я нажал)

ksa 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 20.12.2011 14:54
Цитата:
Сообщение от -=1100=-
как мне узнать позицию элемента li (на какой из 5 элементов я нажал)
К тебе в функцию клика приходит ссылка на элемент (this)... Остаётся только сравнить твой это элемент или нет.
Если твой - вывести значение итерационной переменной и закончить таки цыкл. :)

-=1100=- 20.12.2011 14:55
if (ul.getElementsByTagName('li')[xx]==this.???){...}

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

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

ksa 20.12.2011 14:57
Цитата:
Сообщение от -=1100=-
Я хотя бы в правильную сторону мыслю?
Сторона правильная. :yes:
А вот синтаксис хромает на все четыре копыта... :) И над оптимизацией нужно работать... ;)

nerv_ 20.12.2011 15:01
Цитата:
Сообщение от -=1100=-
Я хотя бы в правильную сторону мыслю?
В какую сторону мыслить, Вам уже давно сказали
Цитата:
Сообщение от -=1100=-
Как узнать где остановиться? (в какой ты кубик пальцем ткнул)
Цитата:
Сообщение от ksa
Таки сравнивать каждый кубик с "моим". В JS есть this...
ksa, да) Тот вариант приемлем только в рамках обозначенного ТС контекста.

nerv_ 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 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.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>


Часовой пояс GMT +3, время: 11:55.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице