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

Question

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

这是生成的 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>