Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > номер элемента в списке

Автор: Evghenusi 6.8.2012, 13:31

Добрый день.
Подскажите пожалуйста как в таком случает получить номер дочернего элемента?

Код


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>

Автор: нуп 6.8.2012, 13:44

Создать массив из всех li, по клику пройтись по массиву и сравнить с текущим li.

Автор: mullih 6.8.2012, 13:57

Код


        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);
                        }
                    }
                }
            }
        }

http://smarly.net/pro-jquery-osnovi-java-script?hash=3025

Автор: Evghenusi 6.8.2012, 14:22

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

кое что полезное в коде mullih для себя нашёл)))

Цитата

this.children

а я по глупости через родителя искал - t.parentNode

Автор: mullih 6.8.2012, 14:31

без прогона цикла вижу только вариант парсить t.innerHTML либо на каждый li повесить атрибут и его читать

Автор: Amphiluke 6.8.2012, 16:37

Цитата(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))
    }
}

Автор: Evghenusi 6.8.2012, 16:44

реализовал свой замысел:

Код


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/

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

Автор: нуп 6.8.2012, 17:10

Что делает эта строчка n.nodeType^3? Легче написать метод Array.indexOf для старых браузеров и вызвать его. У вас в коде 3 глобальные переменные, зачем они нужны то?

Автор: нуп 6.8.2012, 18:02

Код


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 хватит

Автор: Evghenusi 6.8.2012, 21:07

Цитата(нуп @ 6.8.2012, 17:10

)

Что делает эта строчка n.nodeType^3?

Цитата

Для тега nodeType = 1, а для текстового узла nodeType = 3.

http://web.izjum.com/javascript-dom-navigation, если вопрос был про степень, то:

Цитата

Use ^ to check if numbers are not equal
if(a!=123) // before
if(a^123) // after

https://github.com/jed/140bytes/wiki/Byte-saving-techniques

Цитата(нуп @ 6.8.2012, 17:10

)

У вас в коде 3 глобальные переменные, зачем они нужны то?

"t" и "e" разглядел, а третья? и чему они мешают в данном коде?

за код спасибо, посмотрю.

Автор: нуп 6.8.2012, 21:16

Потом наберетесь проблем с глобальными переменными. Я насчитал 4 (t, i, j, n)

Автор: Evghenusi 6.8.2012, 21:26

function next(n) , а по поводу остальных переменных - справедливо

Автор: нуп 6.8.2012, 21:30

Не, вот тут глобальная. var p = n = el

Автор: Evghenusi 6.8.2012, 21:36

Цитата(нуп @ 6.8.2012, 21:30

)

Не, вот тут глобальная. var p = n = el

всё! мир для меня рухнул smile

спасибо

Автор: Evghenusi 6.8.2012, 21:57

понял в чём была моя ошибка, в присваиваемом значении переменным

Цитата

first = next(par.firstChild), last = prev(par.lastChild);