通过基于数组的id来组织列表-jQuery/JS

Question

我有一个动态创建的ul与li，我必须按照某个任意的顺序来组织。

这是生成的HTML的例子：

<ul id="myUl"> 
    <li id="myId_15" class="myId_class">A list item</li> 
    <li id="myId_264" class="myId_class">Another list item</li> 
    <li id="myId_573" class="myId_class">Yet another list item</li> 
</ul> 

这是jQuery的，到目前为止我已经设法为这一部分：

var slicedCompIds = ["15","573","264"]; 

$.each(slicedCompIds, function(i){ 
     $('#myUl').append($('#myUl li').attr('id', 'myId_' + slicedCompIds[i])); 
}) 

的目标是重组或排序列表通过id使用“slicedCompIds”数组中的顺序。它不会以数字升序排列，而且很可能是随机的。

我此刻的代码产生这样的：

<ul id="myUl"> 
    <li id="myId_264" class="myId_class">A list item</li> 
    <li id="myId_264" class="myId_class">Another list item</li> 
    <li id="myId_264" class="myId_class">Yet another list item</li> 
</ul> 

它保持相同的顺序，只是替换了最后一个ID标识的“slicedCompIds”阵列英寸

我真的很难缠我的头，因为我必须申请这部分的逻辑，所以我为什么要求提供想法。任何人都可以将我指向正确的方向吗？

谢谢！

Answer 1

与您的代码的问题是因为在append()呼叫你得到所有li元素，然后在原来的位置追加他们回来之前，改变了第一个的id属性。

要修改逻辑来做你需要的事情，你需要根据数组中的值单独选择每个元素的id，然后append()只有那个元素。试试这个：

var slicedCompIds = ["15","573","264"]; 
 

 
slicedCompIds.forEach(function(value, i){ 
 
    $('#myUl').append($('#myId_' + value)); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="myUl"> 
 
    <li id="myId_15" class="myId_class">A list item</li> 
 
    <li id="myId_264" class="myId_class">Another list item</li> 
 
    <li id="myId_573" class="myId_class">Yet another list item</li> 
 
</ul>