Internet Explorer: копирование / клонирование дочерних элементов в массив

Question

Со вчерашним днем ​​я играю с этой проблемой.Кажется, я не могу найти решение для этого.

Проблема:

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

Желание сохранить вышеупомянутый неупорядоченный список в массив, когда документ готов с использованием javascript / jQuery.

Делая это с

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

на $ (document) .ready () в Internet Explorer 8, массив будет содержать элементы 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

Исходные элементы: кошки, собаки, летучие мыши, людоеды 1-й вызов IE: кошки, собаки, второй вызов IE: пустой массив

Я попытался клонировать массив с помощью $ .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] + "'");
}

Живой пример

В этом примере я просто беру первый 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 + "'");
}

Живой пример

Answer 2

Более jQuery-эй:

var animals = $("ul").children().map(function(){
      return $(this).text();
}).get();

alert(animals);

Живой пример

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