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 sortable）。我希望能够在列表项中向我的用户显示一个数字，该数字指示列表项的位置（并且值可以随着用户重新排序列表而更改）。

如何使用jquery简单地在数组中显示索引位置？或者，有一种简单的方法可以对可排序事件执行此操作（即，一旦对列表进行排序，在适当的情况下递增或递减所有其他列表项中的索引编号）？

Answer 1

我猜你可以使用像

这样的东西将DOM元素添加到数组中

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

然后使用返回int的<{1}}获取索引。

虽然不是很漂亮

Answer 2

我最终做了以下事情：

$(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 3

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

您可以在文档就绪和可排序对象的更改属性上调用此函数

使用jQuery显示列表项的索引

3 个答案: