Jquery 基于ID的特定元素后面的insertAfter

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

我想要的是，当用户单击链接时，它将在列表中搜索最后一个元素，该元素的

数据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");
        }
});

$（.available a”）。在（“单击”，函数（）{
var myID=parseInt（$（this）.data（“id”）；
var alist=$（“.added a”）；
如果（列表长度>0）{
变量nodeToInsertAfter；
$（“.added a”）。每个（函数（）{
if（parseInt（$（this.data（“id”））

insertAfter不是好方法，请尝试以下方法：

这里有一种方法：

$(".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);
});​

$（.available a”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'.added h2'）。在（$（this））之后；
var items=$（'.added a'）.get（）；
项目.排序（功能（a，b）{
变量A=$（A）.data（'id'）；
var B=$（B）.data（'id'）；
如果（AB）返回1；
返回0；
});
$（'.添加h2'）。在（项目）之后；
});​

可能想在上发布这篇文章，我认为要么迭代所有候选元素，要么插入然后排序。就复杂性而言，前者听起来更简单，因此您可能必须使用

.each（）

或其他变体。我建议的一个优化是，由于您总是按顺序插入，一旦遇到

数据id

值大于插入元素的元素，您就可以打破迭代循环。

appendTo

仅在我希望始终附加到末尾时才起作用，而我不希望，我想根据元素的IDI将元素插入到正确的位置。我稍微更新了您的代码（）以准确反映我想要的内容。。。不过效果很好，谢谢。你能解释一下它是如何工作的吗？我从来没有真正看过

.after

。为什么要使用两次？第一个after在添加的节中插入链接而不进行任何排序，但第二个after用排序后的版本替换所有链接。换句话说，第一个after允许您只添加一个链接到下面已经存在的内容，但是第二个添加的是添加整个已排序的链接列表。这只是另一个DOM操作函数，在本例中是在目标元素之外。啊哈，这很有意义。这有多高效？例如，如果我有100件物品，它可能会很慢吗？我不确定。最好的测试方法可能是在jsPerf.com上运行分析以进行比较。它应该非常高效，因为它使用JavaScript的内置排序函数！非常感谢。