разделение списка в jQuery - с учетом памяти и возможности повторного использования - PullRequest
Новая
       11

разделение списка в jQuery - с учетом памяти и возможности повторного использования

4 голосов
/ 04 октября 2010

Я пытаюсь написать в jQuery функцию, которая будет разбивать списки - или, на самом деле, любой элемент, у которого есть дочерние элементы - который осознает использование памяти и является достаточно общим, чтобы его можно было многократно использовать, но у меня возникают проблемы с их разрешением друг против друга.

Ради аргумента (и для сохранения кода), скажем, я пытаюсь разделить список на два списка после третьего элемента. Я не проверяю свой код на наличие синтаксических ошибок или чего-то еще - надеюсь, вы поймете, что я пытаюсь сделать.

Первый вариант - написать такую ​​функцию: 

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, я хочу иметь возможность скопировать его, не беспокоясь о том, какие пользовательские атрибуты могут появиться в будущем. Я хочу сделать это достаточно общим, чтобы справиться с любым элементом. Это второй вариант: 

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

Это достаточно общее, чтобы я мог сделать копию чего угодно, но проблема в том, что я делаю копию всего списка. Если мне понадобится использовать эту программу для разделения особенно длинного списка, я буду беспокоиться о последствиях для памяти.

Идеальная вещь, которую я хотел бы сделать, - это сделать копию элемента, но скопировать только сам элемент, без дочерних элементов. Я не хочу копировать что-либо, что я собираюсь в конечном итоге удалить. Есть ли способ сделать что-то подобное? Большинство плагинов и функций, которые я видел, выбирают так или иначе.

Спасибо!

1 Ответ

1 голос
/ 04 октября 2010

Используйте метод native 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).

...