CODEWITHSUNDEEP
javascript
user141621
user141621

Reputation:

How do I put unordered list items into an array

My code is...

How do I get the text in each list item into an array using native 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>

Many thanks.

Upvotes: 4

Views: 21951

Answers (5)

pixel 67
pixel 67

Reputation: 1618

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);
}

Upvotes: 0

Vincent Robert
Vincent Robert

Reputation: 36120

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, the simpler way using jQuery:

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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074178

Just about any Javascript library (Prototype, jQuery, Closure, ...) will make this 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 need to be sure that the DOM is ready for you to do that. It's definitely ready at onload time, and there are various mechanisms for triggering your code a bit earlier than that if you like (including putting the script right at the end).
  • The loop starts by getting the ul#list element's first child, then continues as long as there are further siblings.
  • In the loop, we check that each node is an Element (nodeType == 1) and that its tag name is "LI".
  • If it is, we retrieve its HTML and push it on the array.

I've used innerHTML to retrieve the content of the LIs because it's widely supported. Alternately, you could use innerText on IE (and some others) and textContent on Firefox, but beware that they don't do quite the same thing (textContent on Firefox will include the contents of script tags, for instance, which probably isn't what you want).

Upvotes: 1

James
James

Reputation: 111900

Unless you want the text-nodes between each <li> it's not a good idea to use childNodes. What's wrong with 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;
}

Upvotes: 4

nickf
nickf

Reputation: 546025

Try this:

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);
}

Upvotes: 1

Related Questions