4

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

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

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

谢谢！

4

1 回答 1

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）。

于 2010-10-03T23:10:31.310 回答