How to store list items within an array with jQuery

Question

I want to store all list items of several list of the same class within an array.

for exemple:

<ul class="myList">
  <li>item 1</li>
  <li>item 2</li>
</ul>

<ul class="myList">
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

Script file:

var arr_list_items = [];

$('ul.myList').each(function(){
  while( !$(this).empty() ) {
    list_item = $(this).find('li:first');
    arr_list_items.push( list_item );
    list_item.remove();
  }
});

The list items are removed, but the array returns empty. Why?

you can add code console.info(1111); inside you while,you will find it does not console — Sky Fang
– Sky Fang, Commented Jul 10, 2015 at 1:19

74U n3U7r1no · Accepted Answer · 2015-07-10 01:26:31Z

6

var array = [];
$('.myList li').each(function(i, li) {
  array.push($(li));
});

answered Jul 10, 2015 at 1:26

74U n3U7r1no

3191 silver badge13 bronze badges

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

Comments

Josh Crozier · Accepted Answer · 2015-07-10 01:23:15Z

3

No need for any complex logic.

You can use the .get() method to retrieve an array of the elements matched by the jQuery object:

Example Here

var arr_list_items = $('.myList li').remove().get();

console.log(arr_list_items);
// [li, li, li, li, li]

Alternatively, you could also use the .map() method:

Example Here

var arr_list_items = $('.myList li').remove().map(function () {
    return this;
}).get();

answered Jul 10, 2015 at 1:23

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Comments

Sky Fang · Accepted Answer · 2015-07-10 01:25:30Z

1

var arr_list_items = [];

$('ul.myList').each(function (i,n) {
    $(n).find('li').each(function (j, m) {
        arr_list_items.push(m);
    }).remove();
});

for (var i = 0; i < arr_list_items.length; i++) {
    console.info(arr_list_items[i]);
}

Because I am poor in English, so I can not explain the code,but I think you can understand it

answered Jul 10, 2015 at 1:25

Sky Fang

1,1016 silver badges6 bronze badges

Comments

sbonkosky · Accepted Answer · 2015-07-10 01:26:15Z

0

var arr_list_items = [];

$('ul.myList').each(function(){
  $(this).find('li').each(function(){
    arr_list_items.push(this);
    $(this).remove();
  });
});

console.info(arr_list_items);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myList">
  <li>item 1</li>
  <li>item 2</li>
</ul>

<ul class="myList">
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

answered Jul 10, 2015 at 1:26

sbonkosky

2,5571 gold badge22 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to store list items within an array with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related