Geek Answers Handbook

How to put unordered list items in an array

My code ...

How to get text in each element of a list into an array using inline javascript?

<ul id="list"> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ul> <script type="text/javascript"> var list = document.getElementById('list').childNodes.TextNode; for(var i=0;i < list.length; i++) { var arrValue = list[i]; alert(arrValue); } </script>

Thank you very much.

+3
source share
5 answers

If you do not need text nodes between each <li> , it is not recommended to use childNodes . What happened to getElementsByTagName('li') ?

 var listItems = document.getElementById('list').getElementsByTagName('li'), myArray = map(listItems, getText); function map(arrayLike, fn) { var ret = [], i = -1, len = arrayLike.length; while (++i < len) ret[i] = fn(arrayLike[i]); return ret; } function getText(node) { if (node.nodeType === 3) return node.data; var txt = ''; if (node = node.firstChild) do { txt += getText(node); } while (node = node.nextSibling); return txt; }
+3
source

Try the following:

 var list = document.getElementById('list').childNodes; var theArray = []; for(var i=0;i < list.length; i++) { var arrValue = list[i].innerHTML; alert(arrValue); theArray.push(arrValue); }
+1
source 
 var LIs = document.getElementById('list').childNodes; var list = []; for( var i = 0; i < LIs.length; ++i ) { var LI = LIs[i]; list.push(LI.innerText || LI.textContent); }

And as always, an easier way to use jQuery:

 var list = $('#list li').map(function(){ return $(this).text(); });
+1
source

Almost any Javascript library ( Prototype , jQuery , Closure , ...) will make it easier, but if you want to do it yourself:

You're close, your Javascript should look something like this:

 window.onload = onPageLoad; // Or any of several other similar mechanisms // (you could just run it at the bottom of the page) function onPageLoad() { var node, list, arrValue; list = []; for (node = document.getElementById('list').firstChild; node; node = node.nextSibling) { if (node.nodeType == 1 && node.tagName == 'LI') { list.push(node.innerHTML); } } // `list` now contains the HTML of each LI element under the `ul#list` element }

Explanation:

  • Before using document.getElementById , you must be sure that the DOM is ready for this. It is definitely ready for onload time, and there are various mechanisms for running your code a little earlier than you like (including if you put an end to the script at the end).
  • The loop begins by receiving the element of the ul#list element as the first child, and then continues until there are other siblings.
  • In the loop, we verify that each node is an Element ( nodeType == 1 ) and that its tag name is "LI".
  • If so, we get its HTML and click on the array.

I used innerHTML to retrieve LI content because it is widely supported. Alternatively, you can use innerText for IE (and some others) and textContent for Firefox, but be careful that they don’t do the same ( textContent in Firefox will include the contents of script tags for example, which is probably not what you want to).

+1
source

var list = document.getElementsByTagName ('ul') [0] .getElementsByTagName ('li');

 var theArray = []; for (var i = 0; i < list.length; i++) { var arrValue = list[i].innerHTML; console.log(arrValue); theArray.push(arrValue); }
0
source

More articles:


All Articles