使用jQuery更改列表元素索引

Change list elements index with jQuery

本文关键字：列表元素 索引 jQuery 使用      更新时间：2023-09-26

我有一个列表:

<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列表状态。

我怎么能改变这一点，或者其他东西?有人能帮忙吗?

我猜你要找的是这个:

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

如果你只是想重命名类那么你可以这样做

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

如果你打算在DOM中重新排序元素，改变类名是行不通的。你需要对它们进行排序因为你使用的是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;
        });
    }

我也写了一些解决方案:

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));
    });
};
相关文章：