[javascript] 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"'

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

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

var arr = new Array();

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

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());_x000D_
console.log(array);

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

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());_x000D_
console.log(array);

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

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

var arr = new Array();

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

Without redundant intermediate arrays:

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

See jsfiddle demo

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

var arr = new Array();

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

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

var arr = new Array();

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

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

Without redundant intermediate arrays:

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

See jsfiddle demo