4

リンクのリストが 2 つあります。ユーザーがいずれかのリストのリンクをクリックすると、もう一方のリストに移動するようにしています。リストはすぐに整理されなくなるので、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");
        }
});
4

2 に答える 2

1

ここに 1 つの方法があります: jsFiddle の例

$(".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);
});​
于 2012-08-28T14:59:25.423 に答える
0

insertAfter は良い方法ではありません。これを試してください: http://api.jquery.com/appendTo/

于 2012-08-28T14:43:14.630 に答える