使用 jQuery 更改列表元素索引

Question

我有一个清单：

<ul>
    <li class="item_1">element</li>
    <li class="item_2">element</li>
    <li class="item_3">element</li>
</ul>

经过一些拖放操作后，我正在切换元素位置，所以在此之后我的列表如下所示：

<ul>
    <li class="item_2">element</li>
    <li class="item_3">element</li>
    <li class="item_1">element</li>
</ul>

我需要在此拖动操作后替换此元素的类以再次获得排序列表 - 拖动前的状态。

所以，我正在这样做：

var setItemNumber = function(item) {
    item.each(function(i) {
        $(this).removeAttr('class').attr('class', 'item_' + (i + 1));
    });
}

发生的事情是元素正在改变类但它们处于相同的位置，看起来它们没有改变索引并且此迭代作用于先前的 DOM 列表状态。

我该如何改变这个，或者其他什么？有人可以帮忙吗？

Answer 1

如果您只需要重命名类那么您可以这样做

var elements = $("li");
for(var i=0; i<elements.length; i++){
    $(elements[i]).attr("class", "item_" + i);
}

Answer 2

我猜你要找的是这个：

reindexItems = function() {
     var items = $('ul li');
     var i = 1;
     items.each(function() {
         $(this).removeAttr('class').attr('class', 'item_' + i++);
     });
}

Answer 3

如果您打算重新排序 DOM 中的元素，更改 class 名称将不起作用。您必须对它们进行实际排序，因为您使用的是 Jquery

    var setItemNumber = function(item) {
        $(item).sort(function(a,b){
        var an = a.attr('class').replace("item_","")
        bn = b.attr('class').replace("item_","");
        if(an > bn) {
             return 1;
        }
        if(an < bn) {
             return -1;
        }
        return 0;
        });
    }

Answer 4

我也写了一些解决方案：

var setItemIndex = function(item) {
    // iterate each marked item
    item.each(function() {
        // get index of item
        var i = $(this).index();
        // set new index based on item class
        $(this)
            .removeAttr('class')
            .attr('class', 'item_' + (i));
    });
};

使用 jQuery 更改列表元素索引

Change list elements index with jQuery

javascript

indexing

jquery

dom