How to get jquery array from html each list item

Question

<ul>
   <li>listitem1</li>
   <li>listitem2</li>
   <li>listitem13</li>
</ul>

I have something like this on HTML file. So how can I get that each list item in my jQuery file as array

like this

var asmg = ["listitem1","listitem2","listitem3"];

what have you tried so far?

Ali Sheikhpour
– Ali Sheikhpour

2018-06-09 15:08:03 +00:00
Commented Jun 9, 2018 at 15:08 — Ali Sheikhpour
– Ali Sheikhpour, Commented Jun 9, 2018 at 15:08

Kiran Shahi · Accepted Answer · 2018-06-09 15:12:48Z

1

use the jQuery.map() and .get() to process a plain array.

var asmg = $( "li" )
  .map(function() {
    return $(this).text();
 }).get();
 
 console.log(asmg);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>listitem1</li>
  <li>listitem2</li>
  <li>listitem13</li>
</ul>

answered Jun 9, 2018 at 15:12

Kiran Shahi

8,0109 gold badges41 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anouar khaldi · Accepted Answer · 2018-06-09 15:20:21Z

1

try with foreach loop :

function getArray(ul){
  asmg = [];
  ul.find('li').each(function(){
    asmg.push($(this).text());
  });
  return asmg;
}

console.log(getArray($('ul')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>listitem1</li>
  <li>listitem2</li>
  <li>listitem13</li>
</ul>

answered Jun 9, 2018 at 15:20

Anouar khaldi

7827 silver badges15 bronze badges

Comments

Nikhil Aggarwal · Accepted Answer · 2018-06-09 15:10:08Z

0

Try following

$(function(){
  var asmg = [];
  $("ul > li").each(function(i, li){
    asmg.push($(li).text());
  });
  console.log(asmg);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>listitem1</li>
  <li>listitem2</li>
  <li>listitem13</li>
</ul>

answered Jun 9, 2018 at 15:10

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Ivan · Accepted Answer · 2018-06-09 15:10:15Z

0

You can use vanilla JavaScript to achieve this:

Select all the li elements
```
document.querySelectorAll('li')
```
unpack them in an array
```
[...document.querySelectorAll('li')]
```

map this array to get the text content of each li item.

[...document.querySelectorAll('li')].map(e => e.textContent)

Here is the code:

const li = [...document.querySelectorAll('li')].map(e => e.textContent)

console.log(li)

<ul>
  <li>listitem1</li>
  <li>listitem2</li>
  <li>listitem13</li>
</ul>

answered Jun 9, 2018 at 15:10

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

Comments

Bernard · Accepted Answer · 2018-06-09 15:38:05Z

0

var asmg = Array.from(document.querySelectorAll('li')).map(e => e.textContent);

var asmg = Array.from(document.querySelectorAll('li')).map(e => e.textContent);
console.log(asmg);

<ul>
  <li>listitem1</li>
  <li>listitem2</li>
  <li>listitem3</li>
</ul>

answered Jun 9, 2018 at 15:38

Bernard

1,2388 silver badges15 bronze badges

Comments

Aminul hasan · Accepted Answer · 2018-06-11 08:45:47Z

0

var varObject = $('ul li').map(function(){
    return $(this).text();
}).get();

   //converting to array 
   var aiMsg = $.makeArray(varObject);

this code works for me.

thanks for all the answer

answered Jun 11, 2018 at 8:45

Aminul hasan

334 bronze badges

Collectives™ on Stack Overflow

How to get jquery array from html each list item

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related