根据 ID 插入特定元素答案

【问题标题】：insertAfter specific element based on ID根据 ID 插入特定元素
【发布时间】：2012-08-28 14:36:20
【问题描述】：

我有两个链接列表。我有它，当用户单击任一列表上的链接时，它会移动到另一个列表。很快列表就会变得杂乱无章，所以我想通过 ID 来组织它们。

然后我想要的是当用户单击链接时，它将在列表中搜索data-id 小于单击的链接的最后一个元素。然后我会在此之后插入元素。

现在，我真正感兴趣的是使用 jQuery 执行此操作的最有效（代码方面）的方法。我知道我可以使用$(".added").each() 来做到这一点，但它看起来很笨重。有没有更好的方法使用选择器或其他东西？

<div class="available">
    <h2>Available Groups</h2>
    <a href="" data-id="1">Group 1<span>Add</span></a>
    <a href="" data-id="2">Group 2<span>Add</span></a>
    <a href="" data-id="3">Group 3<span>Add</span></a>
    <a href="" data-id="4">Group 4<span>Add</span></a>
    <a href="" data-id="5">Group 5<span>Add</span></a>
</div>

<div class="added">
    <h2>Added Groups</h2>
</div>

目前的实现：

$(".available a").on("click",function(){
        var myID = parseInt($(this).data("id"));
        var alist = $(".added a");
        if (alist.length > 0) {
            var nodeToInsertAfter;
            $(".added a").each(function () {
                if (parseInt($(this).data("id")) < myID)
                    nodeToInsertAfter = $(this)
            });

            if (nodeToInsertAfter)
                $(this).insertAfter(nodeToInsertAfter);
            else
                $(this).prependTo(".added");
        }
        else {
            $(this).appendTo(".added");
        }
});

【问题讨论】：

可能想在codereview.stackexchange.com上发帖
我认为要么是遍历所有候选元素，要么只是插入 then 排序。就复杂性而言，前者听起来更简单，因此您可能不得不使用.each() 或其他一些变体。我建议的一项优化是，由于您始终按顺序插入，因此一旦遇到data-id 值大于插入元素的元素，就可以中断迭代循环。

标签： jquery jquery-selectors insertafter

【解决方案1】：

这是一种方式：jsFiddle example

$(".available a").on("click", function(e) {
    e.preventDefault();
    $('.added h2').after($(this));
    var items = $('.added a').get();
    items.sort(function(a, b) {
        var A = $(a).data('id');
        var B = $(b).data('id');
        if (A < B) return -1;
        if (A > B) return 1;
        return 0;
    });
    $('.added h2').after(items);
});

【讨论】：

我稍微更新了您的代码 (jsfiddle.net/yRxcq/3) 以准确反映我想要的内容...不过效果很好，谢谢。你能解释一下它是如何工作的吗？我实际上从未见过.after。为什么要使用两次？
第一个 after 将链接插入添加的部分中，不进行任何排序，但第二个 after 将所有链接替换为排序版本。换句话说，第一个之后允许您只添加一个链接到那里已经存在的内容，但第二个添加是添加整个排序的链接列表。而after 只是另一个 DOM 操作函数，在本例中位于目标元素之外。
啊哈，这很有道理。这效率如何？例如，如果我有 100 件商品，会不会很慢？
我不确定。可能最好的测试方法是在 jsPerf.com 上运行分析以进行比较。它应该非常高效，因为它使用了 JavaScript 的内置排序功能。
干杯 j08691！非常感谢。

【解决方案2】：

insertAfter 不是好办法，试试这个：http://api.jquery.com/appendTo/

【讨论】：

appendTo 仅在我想始终追加到末尾时才有效，我不这样做，我想根据元素的 ID 在正确的位置插入元素