1

追加と削除ができるように、のような2つのリストがあります。開始リストには、次の形式の1〜2,000個の変数を含めることができます。

<div class="notadded" id="X"><input type="checkbox" />Varname and varlabel</div>

チェックしたすべての変数を次のリストに移動して、最初のリストから削除します。

2,000個のアイテムを移動できることを考えると、これを行うための最良の方法は何ですか。また、それらを移動するとき、重複を持たせず、varnameをアルファベット順に保持したくありません（それらはそのようにロードされます）。

とにかくHTMLを調整することもできます。

4

2 に答える 2

1

わかりました、私はあなたが何を望んでいるかを推測しようとしています。したがって、jQuery を使用してこのコードを見てください。

HTML:

<div id="sourceList">
    <div class="notadded" id="1"><input type="checkbox" />Varname and varlabel 1</div>
    <div class="notadded" id="2"><input type="checkbox" />Varname and varlabel 2</div>
    <div class="notadded" id="3"><input type="checkbox" />Varname and varlabel 3</div>
    <div class="notadded" id="4"><input type="checkbox" />Varname and varlabel 4</div>
    <div class="notadded" id="5"><input type="checkbox" />Varname and varlabel 5</div>
    <div class="notadded" id="6"><input type="checkbox" />Varname and varlabel 6</div>
    <div class="notadded" id="7"><input type="checkbox" />Varname and varlabel 7</div>
    <div class="notadded" id="8"><input type="checkbox" />Varname and varlabel 8</div>
    <div class="notadded" id="9"><input type="checkbox" />Varname and varlabel 9</div>
</div>

<input id="moveBtn" type="button" value="Move them!"/>
<input id="removeBtn" type="button" value="Remove them!"/>

<div id="targetList"></div>

JavaScript:

function move( sourceSelector, targetSelector ) {
    var selectedItens = $( sourceSelector + " .notadded input:checked" );
    selectedItens.attr( "checked", false );
    $( targetSelector ).append( selectedItens.parent() );
}

$(function() {
    $( "#moveBtn" ).click(function(){
        move( "#sourceList", "#targetList" );
    });

    $( "#removeBtn" ).click(function(){
        move( "#targetList", "#sourceList" );
    });
});

jsFiddle: http://jsfiddle.net/davidbuzatto/Fnxp2/

これは十分に速いですか？

于 2012-07-19T22:35:50.693 に答える
1

両方のリストが 2000 個の項目でいっぱいで、最初に最初に表示されたものだけだったらどうなるでしょうか。

チェックボックスを編集して送信したら、スタイルを表示または非表示にするようにスタイルを変更します。私の唯一の懸念は、これには大量の dom 要素が含まれるということですが、2000 はすでに大量です。この方法の利点は、クラスの追加/削除以外に dom 操作が少なくて済み、両方のリストの要素の順序が維持されるという追加の利点があります。

私はDavidのフィドルをたくさん借りましたが、ここで作成された新しいDOM要素がないようにそれを適応させました

お役に立てれば。

于 2012-07-19T23:47:19.093 に答える