jqueryでリストを分割する - 記憶と再利用性を意識

Question

私はjqueryでリストを分割する関数を書き込もうとしています - または実際には、子供を持つ要素 - は記憶の使用を意識し、広く再利用できるほど一般的ですが、私はこれらを互いに解決するのに苦労しています。

引数のために（そしてコードをポイントに保つために）、要素3の後にリストを2つのリストに分割しようとしているとしましょう。構文エラーなどについてコードをチェックしていません。

オプション1は、次のような関数を書き込むことです。

var list = $('ul.listCopy');
var newList = $('<ul class="listCopy" />');
var latterElements = list.children('li:gt(3)').remove();
newList.append(latterElements);
list.after(newList);

これは素晴らしいことですが、要素のタイプと属性を知っている限り、それは機能します。内部に複数のdivをdivを分割している場合、またはOLなどを分割している場合、別の関数を書く必要があります。要素にクラス、役割、またはその他のHTML属性がある場合、将来どのようなカスタム属性が発生するかを心配することなくコピーできるようにしたいと思います。あらゆる種類の要素を処理するのに十分な一般的なものにしたいです。これはオプション2です。

var list = //something
var newList = list.clone();
newList.children(':lt(4)').remove();
list.children(':gt(3)').remove();

これは十分に一般的であるため、何でもコピーできますが、問題はリスト全体のコピーを作成していることです。このプログラムを使用して特に長いリストを分割する必要がある場合は、メモリへの影響が心配です。

私がやりたい理想的なことは、要素のコピーを作成することですが、その子供はいない要素自体のみをコピーすることです。削除することになることは何もコピーする必要はありません。このようなことをする方法はありますか？私が見たプラグインと機能のほとんどは、どちらかを選択します。

ありがとう！

Answer 1

使用 ネイティブ cloneNode() 方法. 。合格しない場合 true 議論として、それは子供をクローン化しません。

例： http://jsfiddle.net/4ryxe/

    // Original element
var list = $('ul');
    // Clone of original (top level only)
var newList = list[0].cloneNode();
    // Append children greater than index 3 to the new element
list.children(':gt(3)').appendTo(newList);

使用 .appendTo() 元のリストから要素を削除し、それらを新しい場所に移動します（この場合、 newList).