Как узнать положение элемента
Есть список:
<ul id='ul'> <li>select 1</li> <li>select 2</li> <li>select 3</li> <li>select 4</li> <li>select 5</li> </ul> При нажатии на один из элементов, мне нужно узнать какой он по счету. |
Цитата:
|
Да мне вот как раз то вообще ничего особо в голову не лезет.
У меня вот такая функция есть
var ul=document.getElementById('ul');
var li=ul.getElementsByTagName('li');
for(xx=0; xx<=li.length-1; xx++){
ul.getElementsByTagName('li')[xx].onclick=function (){
rad(this)
};
};
function rad(thiss){
thiss.????
// Можно ли как нибудь так это реализовать
}
|
Цитата:
Я расставляю перед тобой в ряд N кубиков... Потом тучу пальцем в некий кубик и спрашиваю: - Какой он посчёту? Что тебе нужно сделать дабы ответить на мой вопрос? :) |
Любишь играть.... ))
Буду считать с начала ряда.
....
for(xx=0; xx<=li.length-1; xx++){
// Как узнать где остановиться? (в какой ты кубик пальцем ткнул)
if(ul.getElementsByTagName('li')[xx]=='?') {}
};
|
\вариант
<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 1</li>
<li>select 2</li>
<li>select 3</li>
<li>select 4</li>
<li>select 5</li>
</ul>
</body>
</html>
|
... и тут появился nerv.
|
Magneto, :) Я тоже учусь) Поэтому пока мне это интересно)
|
Ну можно было решить и выложить уже после того как топикстартер решил свою проблемку.
|
Цитата:
Цитата:
|
как мне узнать позицию элемента li (на какой из 5 элементов я нажал)
|
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>
И уже не понятно что ты там нашел... :) |
Цитата:
Если твой - вывести значение итерационной переменной и закончить таки цыкл. :) |
if (ul.getElementsByTagName('li')[xx]==this.???){...}
Я хотя бы в правильную сторону мыслю? |
nerv_ молодец уже в том, что делает полные тестовые примеры, ане как -=1100=- какие-то огрызки...
|
Цитата:
А вот синтаксис хромает на все четыре копыта... :) И над оптимизацией нужно работать... ;) |
Цитата:
Цитата:
Цитата:
|
у меня получилось так
<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>
|
Цитата:
<!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>
|
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>
|
Красивее так:
<!DOCTYPE HTML>
<html>
<body>
<ul>
<li>select *</li>
<li>select *</li>
<li>select *</li>
<li>select *</li>
<li>select *</li>
</ul>
</body>
<script type="text/javascript">
(function(){
var ul=document.getElementsByTagName('ul')[0],
li=ul.getElementsByTagName('li');
ul.onclick=function(e) {
var t = e.target || event.srcElement,i=li.length;
while(i--&&li[i]!==t);
alert(i)
}
})()
</script>
</html>
...
functon(event){
var el = event.target || event.srcElement;
...
опасно так делать, опасно. |
Цитата:
|
Aetae, в IE8 не работает. Ругается на эту строчку
var t = e.target || event.srcElement; // 'target' - есть null или не является объектом Цитата:
ksa, да, они текстовые Еноты :D |
Вариант на jQuery ...
Узнать порядковый номер элемента |
Цитата:
(function(){
var ul=document.getElementsByTagName('ul')[0],
li=ul.getElementsByTagName('li');
ul.onclick=function(e) {
var t = *!*e.target*/!* || event.srcElement,i=li.length;
while(i--&&li[i]!==t);
alert(i)
}
})()
так тоже опасно. в ie e будет undefined и обращение к target вызовет ошибку. |
Самдурак, вас поругал, а сам скопипэйстил.))
На самом деле там должно быть: var t = e?e.target:window.event.srcElementВсю жисть так делал а тут прошляпил. Наглядный пример вреда копипэйста.) |
| Часовой пояс GMT +3, время: 11:25. |