Question

I have been playing around with this problem since yesterday. I can’t seem to find a solution to it.

Problem:

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

Wish to save the above unordered list to an array when document is ready using javascript/jQuery.

Doing so with

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

on $(document).ready() in Internet Explorer 8, the array will have the li elements but without their innerHTML

It will be like

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

so I thought I could just save the children into the global array inside a function myFunc(). This will ensure that everything has been loaded.

/* 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)
   }
}

The above code works perfectly on chrome and firefox. each time myfunc is called, the new unordered list will contain only cats and dogs.

However, on IE, it seems that changing the unordered list with $(“ul”).html() also changes the someArray. It works on the first call, but on the second call, it will pull the list of elements from the current UL

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

I did try to clone the array with $.extend and it doesn’t seem to help. Is there a way where I can save the list of child nodes from the original UL and not have them altered by IE?

It seems that IE uses pointer reference when I save the child nodes into the array

Answer 1

It’s not clear what you’re actually trying to do, but if your goal is to get the contents of those elements into an array, then clear out the list, here’s a way to do it:

// 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

In that example I’m just grabbing the first ul in the document; obviously you’d want to use a more appropriate selector.

If you’re really trying to clone the elements, you can use the DOM cloneNode function or jQuery’s wrapper for it 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