Sunday, April 8, 2012

Get an array of list element contents in jQuery



I have a structure like this:







<ul>

<li>text1</li>

<li>text2</li>

<li>text3</li>

</ul>







How do I use javascript or jQuery to get the text as an array?







['text1', 'text2', 'text3']







My plan after this is to assemble it into a string, probably using .join(', ') , and get it in a format like this:







'"text1", "text2", "text3"'





Source: Tips4all

4 comments:

  1. Without redundant intermediate arrays:

    arr = $('li').map(function(el, i) {
    return $(el).text();
    });


    See jsfiddle demo

    ReplyDelete
  2. And in clean javascript:

    var texts = [], lis = document.getElementsByTagName("li");
    for(var i=0, im=lis.length; im>i; i++)
    texts.push(lis[i].firstChild.nodeValue);

    alert(texts);

    ReplyDelete
  3. var arr = new Array();

    $('li').each(function() {
    arr.push(this.innerHTML);
    })

    ReplyDelete
  4. kimstik was close, but not quite.

    Here's how to do it in a convenient one-liner:

    $.map( $('li'), function (element) { return $(element).text() });


    Here's the full documentation for jQuery's map function, it's quite handy: http://api.jquery.com/jQuery.map/

    Just to answer fully, here's the complete functionality you were looking for:

    $.map( $('li'), function (element) { return $(element).text() }).join(', ');

    ReplyDelete