Индекс упорядоченного списка

Question

Есть ли способ получить номер (индекс) тега li в упорядоченном списке?

Я пытаюсь получить номер, который показан сбоку (нумерация списка),Я знаю, что традиционным способом является использование идентификатора, который хранит номер строки, но это будет означать, что, если строка добавляется между ними, многие идентификаторы должны быть отредактированы.Несмотря на то, что я разработал алгоритм для этого, он не настолько эффективен.

Я ищу решение для использования в Javascript.

Answer 1

Вы можете использовать previousElementSibling, чтобы шаг за шагом перейти к началу списка и просто посчитать, сколько прыжков вы сделали:

ol.onclick = function(e) {
    var li = e.target,
        i = 1;

    while ( li.previousElementSibling ) {
        li = li.previousElementSibling;
        i += 1;   
    }

    alert( 'Index = ' + i );
};

Обратите внимание, что обход элемента не реализован в IE8 или ниже (но в IE9).

Демо: http://jsfiddle.net/simevidas/U47wL/

---

Если у вас установлен атрибут start для элемента OL, просто измените строку, в которой объявлено i, сделайте следующее:

i = ol.start || 1;

Демонстрационная версия: http://jsfiddle.net/simevidas/U47wL/2/

---

Если вам требуется решение кросс-браузер , вы можете использовать previousSibling, а затем проверить, является ли брат или сестра элементом узла, и его приращение увеличивается только тогда:

ol.onclick = function(e) {
    var e = e || window.event,
        li = e.target || e.srcElement,
        i = ol.start || 1;

    while ( li.previousSibling ) {
        li = li.previousSibling;
        if ( li.nodeType === 1 ) { i += 1; }   
    }

    alert( 'Index = ' + i );
};

Демонстрационная версия: http://jsfiddle.net/simevidas/U47wL/4/

---

Решение jQuery:

$('ol').click(function(e) {
    var n = $(e.target).index() + this.start;

    alert( 'Index = ' + n );    
});

Демонстрационная версия: http://jsfiddle.net/simevidas/U47wL/5/

Answer 2

jQuery имеет функцию .index(), которая возвращает позицию элемента в его родительском элементе. Это должно делать то, что вы просите, если вы счастливы, используя jQuery.

Например, с учетом следующего HTML:

<ul>
    <li></li>
    <li class="myli"></li>
    <li></li>
</ul>

Следующий JavaScript должен возвращать 1 (индекс начинается с 0)

$('.myli').index();

Answer 3

вы можете попробовать getElementsByTagName в родительских элементах ваших li-элементов и обойти их, увеличив индекс, результаты getElementsByTagNames в том же порядке, в каком они отображаются в дереве DOM.Вот пример: http://jsfiddle.net/s3p7C/

<ol id='myList'>
    <li> one </li>
    <li> two </li>
    <li> three </li>
</ol>

---

var parent = document.getElementById('myList');
var elems = parent.getElementsByTagName('LI');
var res = "";
for(var i=0;i< elems.length ; i++)
{
    res +=  "li with index: " + i + " has content:" + elems[i].innerHTML;
    res += "\n";
}

alert(res);

Answer 4

// Не особенно для списков, но это способ получить индекс элемента внутри его родителя, от самого элемента. Он не будет считать потомков братьев и сестер, просто братьев и сестер с одинаковым тегом.

function nthTag(who){
    var tag= who.tagName, count= 0;
    while(who){
        if(who.tagName=== tag)++count;
        who= who.previousSibling;
    }
    return count;
}

Answer 5

Это один из способов сделать это JSFiddle Demo :

Нажав на узел li, вы получите console.log индексный номер

<ol start='5'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

---

document.onclick = function(e) {
    if (e.target.parentNode.nodeName == 'OL') {
        var els = e.target.parentNode.getElementsByTagName('li');
        var startNum = (e.target.parentNode.getProperty('start') == undefined) ? 1 : +e.target.parentNode.getProperty('start');
        for (var i = 0; i < els.length; i++) {
            if (els[i] === e.target) {
                console.log(i + startNum);
                return;
            }
        }
    }
}