Get an array of list element contents in jQuery

Question

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"'

score 146 · Accepted Answer · answered Oct 29 '08 at 14:43

146

var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

...should do the trick. To get the final output you're looking for, join() plus some concatenation will do nicely:

var quotedCSV = '"' + optionTexts.join('", "') + '"';

answered Oct 29 '08 at 14:43

Shog9

156,901
35
231
235

2

Does jQuery guarantee an order to the elements returned by the query? I would assume that the order returned is the same as the ordering in the DOM (ie text1, text2, text3), but I don't know what to look for in the documentation to see if this is true. – styfle Dec 23 '11 at 01:08
2

I've never seen it traverse the DOM in any other way that normal reading order. So although I can't prove it, I would bet the farm that it alwaays traverses the DOM top to bottom :) – Flater Aug 08 '12 at 08:35
Isn't $.each considered to have bad performance? If yes, is there any other way to do it? – Daniel Nov 01 '13 at 15:40
How many list items do you have that this is an issue, @Daniel? Yeah, there are other ways to do the same thing (you could use $.map() to generate the array in one go), but they amount to the same thing. – Shog9 Nov 01 '13 at 16:01
@Shog9: I wish to push a dictionary to the list taking values from two different columns from each rows of a table. Isn't there easier way to do that? Thanks in advance. – ln2khanal Dec 06 '13 at 15:54
You should post that as a separate question, @ln2khanal, and include an example of what you're looking to accomplish. – Shog9 Dec 06 '13 at 15:56

score 73 · Answer 2 · edited May 14 '21 at 15:34

73

Without redundant intermediate arrays:

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

See jsfiddle demo

edited May 14 '21 at 15:34

Clayton

392
1
3
17

answered Mar 04 '11 at 15:56

kimstik

1,611
2
15
14

6

You miss `.get()` at the end. – Felix Kling Mar 04 '11 at 18:12
4

Based on Felix Klings suggestion: arr = $('li').map(function(){ return $(this).text(); }).get(); – Emil Stenström Mar 07 '11 at 14:21
1

i dont understand why "get function" is necessary. – crsuarezf Jul 26 '11 at 20:54
Yeah, what is the .get() for? – Chris Abrams Sep 19 '11 at 00:50
Are you sure $(this) refers to the item being iterated? According to http://api.jquery.com/jQuery.map/, this refers to the global object. – Alex Nolasco Mar 26 '12 at 14:15
1

http://api.jquery.com/map/ explains why there's a .get() necessary ("As the return value is a jQuery-wrapped array, it's very common to get() the returned object to work with a basic array."). – Christoph Lupprich Apr 12 '12 at 18:04
3

The worse thing is, that the iterator is wrong, you need to switch the element and index, so that it says function(i, el). – Christoph Lupprich Apr 12 '12 at 18:05
@Kitto I saw the same thing, after spending 5+ minutes. – John Lehmann Jan 19 '13 at 21:52

score 15 · Answer 3 · answered Oct 29 '08 at 15:16

15

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

answered Oct 29 '08 at 15:16

roenving

2,560
14
14

score 14 · Answer 4 · answered Sep 22 '11 at 16:32

14

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(', ');

answered Sep 22 '11 at 16:32

Cybolic

245
2
7

I just saw this here (http://stackoverflow.com/questions/4856283/jquery-collect-value-of-list-items-and-place-in-array) and was gonna repost since it's a great trick to know – SeanDowney Aug 15 '12 at 19:16
My way should be little bit faster.. or not? – kimstik Sep 21 '16 at 07:51
1

kimstik, according to Benchmark.js, my function call does 11,252 / 9,685 ops/sec for Opera and Chrome respectively, whereas the method call you posted does 9,666 / 9,083 ops/sec on a list of 40 items. I think the difference comes from the conversion from jQuery element list to Array in your example, if that helps. They're very close, so pick whichever suits your coding style better :) – Cybolic Sep 22 '16 at 20:04

score 6 · Answer 5 · answered Oct 29 '08 at 14:45

6

var arr = new Array();

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

answered Oct 29 '08 at 14:45

Dave Ward

59,815
13
117
134

1

Instead of relying on innerHTML, you should change "this" to a jQuery object and use the jQuery native text method. $(this).text() – Nathan Strutz Oct 29 '08 at 14:49
3

why? eventually $(this).html() will use the native method – Khodor Jul 21 '10 at 09:00
In this case it's better to use [] instead of the new Array() - [What’s the difference](http://stackoverflow.com/a/1273936/3183606) – krypru Feb 09 '17 at 14:24

score 3 · Answer 6 · answered Feb 20 '19 at 18:36

You may do as follows. one line of code will be enough

let array = $('ul>li').toArray().map(item => $(item).html());
Get the interested element
1. get children
2. get the array from toArray() method
3. filter out the results you want

let array = $('ul>li').toArray().map(item => $(item).html());
console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

Get an array of list element contents in jQuery

6 Answers6

Linked

Related