How to select elements from a list and put it in an array using javascript

Question

I want to pick all the elements inside the ul tag and push it in an array using javascript.How should I do that?

<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>

Push what in an array, the element or just the text. The classname indicates that you're using jQuery, but it's not tagged with jQuery. — adeneo, Jul 01 '14 at 09:09
Have you ever heard of the DOM? It seems like you would benefit the most from a tutorial which covers that: http://www.quirksmode.org/dom/intro.html — Felix Kling, Jul 01 '14 at 09:11
the text only. Yes I am using jquery for this. But for the above problem even JS could do. — user3767064, Jul 01 '14 at 09:12

score 2 · Answer 1 · answered Jul 01 '14 at 09:12

2

using .each() function on jQuery will help you achieve it.

try something like :

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

for .each() reference click here

answered Jul 01 '14 at 09:12

Yaje

2,753
18
32

If i have more than one
- s then!
– user3767064 Jul 01 '14 at 09:14
@user: then only select the lis you want! You always have to adjust answers to fit you particular use case. – Felix Kling Jul 01 '14 at 09:15
then use `$("li.ui-state-default")` . you never specified that condition at the first place – Yaje Jul 01 '14 at 09:15

score 0 · Answer 2 · answered Jul 01 '14 at 09:09

0

document.getElementById('sortable1').children

returns array-like object of li objects

answered Jul 01 '14 at 09:09

Vlas Bashynskyi

1,886
2
16
25

Actually, it returns a HTMLCollection, which is not an array but an array-like object. – adeneo Jul 01 '14 at 09:10
var x[] = document.getElementById('sortable1').children; – user3767064 Jul 01 '14 at 09:11

score 0 · Answer 3 · answered Jul 01 '14 at 09:13

Based on your class names, it looks like you are using jQuery...

var myItems = $("#sortable1").children();

Or, if you want the text only...

var myItems = [];

$("#sortable1").each(function() {
    var $this = $(this);
    myItems.push($this.text());
});

MD SHAHIDUL ISLAM · Accepted Answer · 2014-07-01T09:20:25.547

0

JavaScript: DEMO

var sortable1 = document.getElementById("sortable1").children;
var array = new Array();
for(i=0; i<sortable1.length; i++) {
    array.push(sortable1[i].innerHTML);
}

jQuery: DEMO

var lis = $("#sortable1").children();
var array = new Array();
for(i=0; i<lis.length; i++) {
    array.push($(lis[i]).text());
}

edited Jul 01 '14 at 09:20

answered Jul 01 '14 at 09:15

MD SHAHIDUL ISLAM

14,325
6
82
89

Thanks . I tried it and worked for me – user3767064 Jul 02 '14 at 08:34

How to select elements from a list and put it in an array using javascript

4 Answers4