dividindo uma lista em jQuery - consciente da memória e reutilização

Question

Estou tentando escrever uma função no jQuery que dividirá listas - ou realmente, qualquer elemento que tenha filhos - que esteja consciente do uso da memória e seja geral o suficiente para ser amplamente reutilizável, mas estou tendo problemas para resolvê -los um contra o outro .

Por uma questão de argumento (e manter o código no ponto), digamos que estou tentando dividir a lista em duas listas após o elemento três. Não estou verificando meu código quanto a erros de sintaxe ou qualquer outra coisa - espero que você tenha a ideia do que estou tentando fazer.

A opção um é escrever uma função como esta:

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

Isso é ótimo, mas funciona apenas desde que eu conheça o tipo e os atributos do elemento. Eu teria que escrever uma função separada se estivesse dividindo uma div com várias divs dentro dela, ou um OL, ou qualquer outra coisa. Se o elemento tiver uma classe ou uma função ou qualquer outro atributo HTML, quero poder copiá -lo sem me preocupar com que tipo de atributos personalizados poderão surgir no futuro. Quero tornar isso geral o suficiente para lidar com qualquer tipo de elemento. Esta é a opção dois:

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

Isso é geral o suficiente para que eu possa fazer uma cópia de qualquer coisa, mas o problema é que estou fazendo uma cópia de toda a lista. Se eu precisava usar este programa para dividir uma lista particularmente longa, estou preocupado com as implicações da memória.

A coisa ideal que eu gostaria de fazer é fazer uma cópia de um elemento, mas apenas copiar o elemento em si, com nenhum de seus filhos. Não quero copiar nada que vou excluir. Existe uma maneira de fazer algo assim? A maioria dos plugins e funções que vi escolher de uma maneira ou de outra.

Obrigado!

Answer 1

Use o nativo cloneNode() método. Se você não passar true Como argumento, ele não clona nenhum filho.

Exemplo: 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);

Usando .appendTo() remove os elementos da lista original e os move para seu novo local (neste caso, o newList).