在jquery sortable之后定义列表中元素的索引

I hope you can help me with a little problem. With my code I want to rename the element id's of my ul list, which are sorted by jquery sortable, but its not working properly. Sometimes it's working, but sometimes there's just an error: "Uncaught TypeError: Cannot read property 'id' of null" and it's renaming like: 1-2-3-4-5-6-6-8 .Maybe you can help me out.

我希望你能帮我解决一个小问题。使用我的代码,我想重命名我的ul列表的元素id,它按jquery sortable排序,但它无法正常工作。有时它正在工作,但有时只会出现错误:“未捕获的TypeError:无法读取null的属性'id'并且它重命名为:1-2-3-4-5-6-6-8。也许你可以帮助我出。

Here's my ul:

这是我的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:

js for jquery sortable:

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

and here's my js for getting actual index and renaming li id:

这是我获取实际索引和重命名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;
        }
    }
}

Thank you for giving me a hint!

谢谢你给我一个提示!

2 个解决方案

#1

Thanks for your hint CBroe! Its working like a charm now!

谢谢你的暗示CBroe!它的工作就像一个魅力吧!

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

#2

this error occurred when you have a list of duplicate id's or not a continues id's like(3,2,4,1,6) here '5' is missing and you are just replacing id by accessing sequential number that is 'i' so when i will reach to 5 then "document.getElementById(i).id" this will give you '-1' because there is no li with id=5. i hope this code will help you for your problem.

如果你有一个重复id的列表,或者没有继续id,那么就会出现这个错误(3,2,4,1,6)这里缺少'5'而你只是通过访问'i'的顺序号来替换id当我将达到5然后“document.getElementById(i).id”这将给你'-1',因为没有id为id = 5的li。我希望这段代码可以帮助您解决问题。

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);
        }
    });
}