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

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

我的代码目前正在产生这个：

<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”数组中的最后一个id。

我真的无法绕过我必须申请这部分的逻辑，因此我为什么要求提出想法。有人能指出我正确的方向吗？

谢谢！

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>

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

1 个答案: