Question

我正在尝试在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();

这很通用，我可以复制任何内容，但问题是我正在制作整个列表的副本。如果我需要使用这个程序来划分一个特别长的列表，我会担心内存的影响。

我想要做的理想事情是制作一个元素的副本，但只复制元素本身，而不是它的子元素。我不想复制我最终要删除的内容。有没有办法做这样的事情？我见过的大多数插件和功能都选择了这种方式。

谢谢！

Answer 1

使用native cloneNode() method。如果您未将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);

Using .appendTo()从原始列表中删除元素，并将它们移动到新位置（在本例中为newList）。

在jQuery中拆分列表 - 意识到内存和可重用性

1 个答案: