javascript - 互联网浏览器 : Copy/clone children to array

Question

从昨天开始我就一直在研究这个问题。我似乎找不到解决方案。

问题:

<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Bats</li>
<li>Ogre</li>
</ul>

希望在使用 javascript/jQuery 准备好文档时将上述无序列表保存到数组中。

用

这样做

someArray = $("ul").children()

在 Internet Explorer 8 中的 $(document).ready() 中，数组将包含 li 元素但没有它们的 innerHTML

会像

<li></li>
<li></li>
...

所以我想我可以将子项保存到函数 myFunc() 内的全局数组中。这将确保所有内容都已加载。

/* Global Variable */
var someArray = null;

/* function to be called*/
function myFunc() {
   if (someArray == null) someArray = $("ul").children()
   result = someArray with elements from index 0 and n-2
   $("ul").html();

   $.each(result, function() {
       $("ul").append(this)
   }
}

以上代码在 chrome 和 firefox 上完美运行。每次调用 myfunc 时，新的无序列表将只包含猫和狗。

但是，在 IE 上，使用 $("ul").html() 更改无序列表似乎也会更改 someArray。它在第一次调用时起作用，但在第二次调用时，它将从当前 UL 中提取元素列表

Original elements: cats, dogs bats, ogre 1st call on IE: cats, dogs, second call on IE: empty array

我曾尝试使用 $.extend 克隆数组，但似乎没有帮助。有没有一种方法可以保存原始 UL 的子节点列表，而不用 IE 更改它们？

我把子节点存入数组时好像IE用的是指针引用

Answer 1

不清楚您实际要做什么，但如果您的目标是将这些元素的内容放入数组中，然后清除列表，这里有一种方法可以做到这一点:

// Grab the animals
var animals = [];
$("ul:first").children().each(function() {
  animals.push(this.innerHTML);
});

// Wipe out the list
$("ul").html("");

// Show the result
var index;
for (index = 0; index < animals.length; ++index) {
  display("animals[" + index + "] = '" + animals[index] + "'");
}

Live example

在那个例子中，我只是抓取文档中的第一个 ul；显然，您希望使用更合适的选择器。

如果你真的想克隆元素，你可以使用 DOM cloneNode函数或 jQuery 的包装器 clone :

// Grab the animal elements
var animals = [];
$("ul:first").children().each(function() {
  animals.push(this.cloneNode(true));
});

// Wipe out the list
$("ul").html("");

// Show the result
var index;
for (index = 0; index < animals.length; ++index) {
  display("animals[" + index + "] = '" + animals[index].innerHTML + "'");
}

Live example