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

我猜你在寻找的是：

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

Answer 2

如果您只需要重命名类，那么您可以执行例如

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

Answer 3

如果您计划重新排序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;
        });
    }

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更改列表元素索引

4 个答案: