使用jQuery显示列表项的索引

时间:2009-09-18 06:28:47

标签: jquery-ui

我有一个无序的列表:

<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简单地在数组中显示索引位置?或者,有一种简单的方法可以对可排序事件执行此操作(即,一旦对列表进行排序,在适当的情况下递增或递减所有其他列表项中的索引编号)?

3 个答案:

答案 0 :(得分:1)

我猜你可以使用像

这样的东西将DOM元素添加到数组中
var arr = jQuery.makeArray(document.getElementsByTagName("span"));

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

虽然不是很漂亮

答案 1 :(得分: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]);
            }
        }
    });
});

答案 2 :(得分:0)

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

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