Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> номер элемента в списке 
V
    Опции темы
Evghenusi
Дата 6.8.2012, 13:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
Добрый день.
Подскажите пожалуйста как в таком случает получить номер дочернего элемента?

Код

window.onload = function()
{
    document.getElementById('ul').onclick = function(e)
    {
        e=e||window.event;
        t=e.target||e.srcElement;    
        if(t.tagName == 'LI')
        {
            // ?
        }
    }
}

Код

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>
PM WWW   Вверх
нуп
Дата 6.8.2012, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33
Создать массив из всех li, по клику пройтись по массиву и сравнить с текущим li. 
PM MAIL   Вверх
mullih
Дата 6.8.2012, 13:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 75
Регистрация: 19.12.2006

Репутация: 1
Всего: 2
Код

        window.onload = function () {
            document.getElementById('ul').onclick = function (e) {
                e = e || window.event;
                t = e.target || e.srcElement;
                if (t.tagName == 'LI') {
                    for (var i = 0; i < this.children.length; i++) {
                        if (this.children[i] == t) {
                            var num = i + 1;
                            alert(num);
                        }
                    }
                }
            }
        }


сравнение объектов в javascript



Это сообщение отредактировал(а) mullih - 6.8.2012, 13:58
PM MAIL WWW Skype   Вверх
Evghenusi
Дата 6.8.2012, 14:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
Спасибо нуп и mullih. 
Видимо ничего хитрее нет, что бы без прохода по всем тегам.
У меня есть ещё замысел попробовать от this одним циклом искать в обе стороны (previousSibling/nextSibling).

кое что полезное в коде mullih для себя нашёл)))
Цитата
this.children
а я по глупости через родителя искал - t.parentNode

Это сообщение отредактировал(а) Evghenusi - 6.8.2012, 14:27
PM WWW   Вверх
mullih
Дата 6.8.2012, 14:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 75
Регистрация: 19.12.2006

Репутация: 1
Всего: 2
без прогона цикла вижу только вариант парсить t.innerHTML либо на каждый li повесить атрибут и его читать
PM MAIL WWW Skype   Вверх
Amphiluke
Дата 6.8.2012, 16:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Цитата(Evghenusi @  6.8.2012,  18:22 Найти цитируемый пост)
Видимо ничего хитрее нет

Для современных браузеров есть.
Код

document.getElementById('ul').onclick = function(e)
{
    e=e||window.event;
    t=e.target||e.srcElement;    
    if(t.tagName == 'LI')
    {
        alert(Array.prototype.indexOf.call(this.children, t))
    }
}
PM   Вверх
Evghenusi
Дата 6.8.2012, 16:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
реализовал свой замысел:
Код

function prev(n)
{
    while(n=n.previousSibling)
        if(n.nodeType^3) return n;
    return 0
}
function next(n)
{
    while(n=n.nextSibling)
        if(n.nodeType^3) return n;
    return 0
}
function owNNum(el,par)
{
    par = par||el.parentNode;
    var p = n = el, flag, first = next(par.firstChild), last = prev(par.lastChild);
    for(i=0, j = par.children.length; i<j; i++)
    {
        if((flag = first!==p) && last!==n)
        {
            p = prev(p);
            n = next(n);
        }
        else break;
    }
    return flag ? j-i : ++i
}
window.onload = function()
{
    document.getElementById('ul').onclick = function(e)
    {
        e=e||window.event;
        t=e.target||e.srcElement;    
        if(t.tagName == 'LI')
        {
            alert(owNNum(t, this));
        }
    }
}

но результат работы в IE<9 отличается от других браузеров, номер элементов меньше на единицу, а у первого номер - 2
http://jsfiddle.net/bHkWU/1/

Подскажите пожалуйста как поправить.

Это сообщение отредактировал(а) Evghenusi - 6.8.2012, 16:56
PM WWW   Вверх
нуп
Дата 6.8.2012, 17:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33
Что делает эта строчка n.nodeType^3? Легче написать метод Array.indexOf для старых браузеров и вызвать его. У вас в коде 3 глобальные переменные, зачем они нужны то?
PM MAIL   Вверх
нуп
Дата 6.8.2012, 18:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33
Код

function prev(n) {
    while (n = n.previousSibling) {
        if (n.nodeType ^ 3) return n;
    }
    return 0
}
function next(n) {
    while (n = n.nextSibling)
        if (n.nodeType ^ 3) return n;
    return 0
}
function owNNum(el, par) {
    var length = par.children.length,
        n = par.children[0],
        p = par.children[length - 1],
        findex = 0,
        lindex = length - 1;

    while (el != p && el != n && lindex >= 0) {
        p = prev(p);
        n = next(n);
        findex++;
        lindex--;
    }

    if (el == p) {
        return lindex;
    }
    else if (el == n) {
        return findex;
    }
    return -1;
}

window.onload = function () {
    document.getElementById('ul').onclick = function (e) {
        e = e || window.event;
        var t = e.target || e.srcElement;
        if (t.tagName == 'LI') {
            alert(owNNum(t, this));
        }
    };
};




Хотя вариант не очень smile Простого перебоар по children хватит

Это сообщение отредактировал(а) нуп - 6.8.2012, 21:04
PM MAIL   Вверх
Evghenusi
Дата 6.8.2012, 21:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
Цитата(нуп @  6.8.2012,  17:10 Найти цитируемый пост)
Что делает эта строчка n.nodeType^3?

Цитата
Для тега nodeType = 1, а для текстового узла nodeType = 3.
найдено тут, если вопрос был про степень, то:
Цитата
Use ^ to check if numbers are not equal
if(a!=123) // before
if(a^123) // after
взято отсюда

Цитата(нуп @  6.8.2012,  17:10 Найти цитируемый пост)
У вас в коде 3 глобальные переменные, зачем они нужны то? 
"t" и "e" разглядел, а третья? и чему они мешают в данном коде?

за код спасибо, посмотрю.
PM WWW   Вверх
нуп
Дата 6.8.2012, 21:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33
Потом наберетесь проблем с глобальными переменными. Я насчитал 4 (t, i, j, n)
PM MAIL   Вверх
Evghenusi
Дата 6.8.2012, 21:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
function next(n) , а по поводу остальных переменных - справедливо

Это сообщение отредактировал(а) Evghenusi - 6.8.2012, 21:28
PM WWW   Вверх
нуп
Дата 6.8.2012, 21:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Ботокодер
**


Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33
Не, вот тут глобальная.  var p = n = el
PM MAIL   Вверх
Evghenusi
Дата 6.8.2012, 21:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
Цитата(нуп @  6.8.2012,  21:30 Найти цитируемый пост)
Не, вот тут глобальная.  var p = n = el 

всё! мир для меня рухнул  smile 
спасибо
PM WWW   Вверх
Evghenusi
Дата 6.8.2012, 21:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15
понял в чём была моя ошибка, в присваиваемом значении переменным
Цитата
first = next(par.firstChild), last = prev(par.lastChild);


Это сообщение отредактировал(а) Evghenusi - 6.8.2012, 23:07
PM WWW   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0517 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.