Jquery ui 使用jQuery显示列表项的索引

我有一个无序的列表，如下所示：

<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简单地显示数组中的索引位置？或者，是否有一种简单的方法来处理可排序事件（即，一旦对列表进行排序，根据需要增加或减少所有其他列表项中的索引号）？

我想您可以使用以下方法将DOM元素添加到数组中

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

然后使用返回int的

jQuery.inArray（value，array）

获取它们的索引

---

虽然不是很漂亮，但我最终还是做了以下几件事：

$(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]);
            }
        }
    });
});

$（函数（）{
$（“.foo”）。可排序({
停止：功能（事件、用户界面）{
var itemID=$（ui.item）.attr（“id”）；
var items=$（“li#“+itemID）.parent（.foo”）.children（）；
var updateItems=新数组（）；
对于（var i=0；i
您可以在documentready和sortable对象的change属性上调用此函数

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