Показать индекс элемента списка, используя jQuery

Question

У меня есть неупорядоченный список, например:

<ul class="foo">
  <li id="asdf">
    <span class="indexnumber"></span>
    <span class="description">whatever</span>
  </li>

  <li id="asdfasdf">
    <span class="indexnumber"></span>
    <span class="description">whatever</span>
  </li>
</ul>

Я хочу отобразить индексный номер элемента списка в интервале indexnumber (т. Е. Первый элемент отобразит 1, второй - 2 и т. Д.). Мои пользователи смогут сортировать элементы списка (используя сортировку с помощью jquery ui). Я хотел бы иметь возможность показывать моим пользователям номер в элементе списка, который указывает, где находится элемент списка (и значение может изменяться по мере того, как пользователь переупорядочивает список).

Как я могу просто отобразить позицию индекса в массиве, используя jquery? С другой стороны, существует ли простой способ сделать это с помощью сортируемых событий (т.е. после сортировки списка увеличить или уменьшить номера индексов во всех других элементах списка в зависимости от ситуации)?

Answer 1

Я закончил тем, что сделал следующее:

$(function() {
    $(".foo").sortable({
        stop: function(event, ui) {
            var itemID = $(ui.item).attr("id");
            var items = $("li#" + itemID).parent(".foo").children();

            var updateditems = new Array();

            for (var i = 0; i <= items.length - 1; i++) {
                var singleitemID = $(items[i]).attr("id");
                var loc = i + 1;

                $("#" + singleitemID).text(loc);


                updateditems.push([singleitemID, loc]);
            }
        }
    });
});

Answer 2

Полагаю, вы можете добавить элементы DOM в массив, используя что-то вроде

var arr = jQuery.makeArray(document.getElementsByTagName("span"));

Затем получите их индекс, используя jQuery.inArray( value, array ) , который возвращает int.

Не очень красиво, хотя

Answer 3

index_list = function() {
    $(".foo li").each(function(i){
        $(this).find(".indexNumber").html((i+1));
    });
}

Вы можете вызвать эту функцию при готовности документа и об атрибуте изменения сортируемого объекта