在 jquery 可排序后定义 <li> 元素<ul> 元素的索引

Define index of <li> element in <ul> list after jquery sortable

本文关键字：元素 jquery ul 索引 li 排序 定义      更新时间：2023-09-26

我希望你能帮我解决一个小问题。使用我的代码，我想重命名我的 ul 列表的元素 id，这些元素 id 按 jquery 可排序排序，但它无法正常工作。有时它可以工作，但有时只有一个错误："未捕获的类型错误：无法读取 null 的属性'id'"，它重命名为：1-2-3-4-5-6-6-8 。也许你可以帮我。

这是我的 ul：

<ul class="example">
    <li id="1" class="example"></li>
    <li id="2" class="example"></li>
    <li id="3" class="example"></li>
    <li id="4" class="example"></li>
    <li id="5" class="example"></li>
    <li id="6" class="example"></li>
</ul>

js for jquery sortable：

$('.example').sortable();

这是我用于获取实际索引和重命名 li id 的 js：

function myFunction(){
    var lenght = $(".example").length;
    lenght = lenght -1;
    for (var i=1; i<=lenght; i++){
        var newIn = $('#'+i).index();
        newIn = newIn +1;
        var inold = document.getElementById(i).id;

    if(newIn != inold){
        var change = document.getElementById(i).id = newIn;
        }
    }
}

谢谢你给我提示！

感谢您的提示 CBroe！它现在就像一个魅力！

    function myFunction(){
$(".example").each(function(i) {
    var row = $(this)
    row.attr('id', '' + i);
});
}

当您有重复 id 的列表或不是连续 id 时，就会发生此错误，例如 (3,2,4,1,6( 这里缺少"5"，您只是通过访问序列号"i"来替换 id，所以当我达到 5 时，"document.getElementById(i(.id"，这将给你"-1"，因为没有 li id=5。 我希望这段代码能帮助你解决你的问题。

function myfunction(){
$("li.example").each(function() {
        var currentId = $(this).attr("id"); //id of each li
        var newIn = $(this).index(); //index of each li starts from 0
        newIn++;
        if(currentId!==newIn)
        {
            $(this).attr("id",newIn);
        }
    });
}
相关文章：