An array of elements in jQuery

Question

Markup code:

<div id="elements">
    <div>
        <a href="#">text</a>
        <a href="#">text</a>
        <a href="#">text</a>
    </div>
    <div>
        <a href="#">text</a>
        <a href="#">text</a>
        <a href="#">text</a>
    </div>
    <div>
        <a href="#">text</a>
        <a href="#">text</a>
    </div>
</div>

Please tell me how can I get an array of all elements of the div, so that later, it is possible to address an array of options?

Such as:

divs[0]  
links[1]

Take a look here: http://stackoverflow.com/q/247023/844726 Quite a few options. — swatkins, Oct 01 '11 at 20:22

score 13 · Answer 1 · answered Feb 07 '17 at 15:25

13

See https://api.jquery.com/toArray/

$( "li" ).toArray()

This works great in cases like

$( "li" ).toArray().each( function(li) {
  console.log('do something with this list item', li);
})

or if you really want

$( "li" ).toArray()[0]

answered Feb 07 '17 at 15:25

Paul Schwarz

1,828
1
15
24

3

This is the correct answer. The accepted answer is outdated. – png Jan 30 '19 at 00:37

Shef · Accepted Answer · 2011-10-01T20:28:17.010

9

Demo

var divs = $('#elements div');
var links = $('#elements div a');

If you want the DOM elements, then you can access them with the array style like divs[0] or links[2].
If you want to get the specific jQuery object, you can access them with divs.eq(0) or links.eq(1).

edited Oct 01 '11 at 20:28

answered Oct 01 '11 at 20:22

Shef

44,808
15
79
90

I get an array of links for each div separately? $ ('# elements div [0] a'); like - something like that, just to correct it. ) I need to do the sorting. :) – SirRoland Oct 01 '11 at 20:31
@SirRoland Yes, you can do `$('#elements div:eq(0) a');`. – Shef Oct 01 '11 at 20:35
if I write: var links=$('#elements div:eq(0) a').length; alert(links); // = 0 – SirRoland Oct 01 '11 at 20:39

meder omuraliev · Answer 3 · 2011-10-01T20:30:47.710

8

$('#elements div').eq(0) // first div

$('#elements div a').eq(1) // second anchor in group of divs

Without the .eq() you have a collection of elements, the .eq just singles the elements out.

edited Oct 01 '11 at 20:30

answered Oct 01 '11 at 20:21

meder omuraliev

183,342
71
393
434

score 1 · Answer 4 · answered Oct 01 '11 at 20:23

wrapper = document.getElementById('elements');
divs = wrapper.getElementsByTagName('div');
links = [];
for (i = 0; i < divs.length; i++) {
    links[i] = divs[i].getElementsByTagName('a');
}

divs will now be an array of the divs inside of your "elements" div. Links is now a two dimensional array, where the first index refers to the div inside your "elements" div, and the second index refers to the "a" tags inside that div.

links[2][1]

will refer to the element denoted below:

<div id="elements">
    <div>
        <a href="#">text</a>
        <a href="#">text</a>
        <a href="#">text</a>
    </div>
    <div>
        <a href="#">text</a>
        <a href="#">text</a>
        <a href="#">text</a>
    </div>
    <div>
        <a href="#">text</a>
        <a href="#">text</a>  //this one
    </div>
</div>

score 1 · Answer 5 · answered Oct 01 '11 at 20:38

1

Or also, and I believe this is more accurately what you asked for:

$("#elements div:eq(0) a:eq(1)")

answered Oct 01 '11 at 20:38

maxijb

541
4
13

score 0 · Answer 6 · edited Jul 31 '12 at 14:34

0

$("#elements a")

$("div a")

or $("a")

jQuery Selectors

edited Jul 31 '12 at 14:34

Nikola K.

7,093
13
31
39

answered Oct 01 '11 at 20:21

Mirko

1,014
9
11

An array of elements in jQuery

6 Answers6