how to iterate a result of jquery selector

Question

I want to iterate a result of query selector.

Html code

<nav id="navigation">
        <a href="#" tabindex="1" class="active_nav">nav1</a>
        <a href="#" tabindex="2">nav2</a>
        <a href="#"tabindex="3">nav3</a>
</nav>

when I use javascript

alert($("#navigation >a")[0]);

the result is the tag a href attribute I don't know why.

@TusharGupta I want to get the first DOM object but not the attribute of the first object — bohan, Jul 18 '13 at 09:31
@TusharGupta why `$("#navigation >a")[0];` returns href attribute of the first tag not the 1st dom object — bohan, Jul 18 '13 at 10:21
You need to specify which a tag you want. In this case, you want the first one so `$("#navigation > a:eq(0)")[0]` — pmrotule, Nov 25 '14 at 22:10

Sushanth -- · Accepted Answer · 2016-12-19T04:52:31.273

34

Use $.each

$("#navigation > a").each(function() {

     console.log(this.href)
});

$('#navigation > a')[0]
      ^              ^---- Selects the 1st dom object from the jQuery object
      |                    that is nothing but the index of the element among 
      |                    the list of elements
      |-------  Gives you children of nav(3 anchor tags in this case)  which is a
                jQuery object that contains the list of matched elements

edited Dec 19 '16 at 04:52

answered Jul 18 '13 at 07:28

Sushanth --

55,259
9
66
105

why the `$("#navigation >a")[0];` returns the href attribute of the first tag not the 1st dom object – bohan Jul 18 '13 at 09:28

score 3 · Answer 2 · answered Jul 18 '13 at 07:32

3

You can use jQuery built-in each() for this iteration like this:

$("#navigation>a").each(function(index){
    console.log("I am " + index + "th element.");
    //and you can access this element by $(this)
});

answered Jul 18 '13 at 07:32

frogatto

28,539
11
83
129

score 3 · Answer 3 · answered Jul 18 '13 at 07:38

3

If you want to iterate all <a> tags, you can use each function

$('#navigation >a').each(function() { 
    alert(this.href);
});

and if you only want to get the first <a> tag then use .eq()

alert($('#navigation >a').eq(0).attr('href');

answered Jul 18 '13 at 07:38

Setrákus Ra

255
1
8

1

For first `` there is a simpler way: `$('#navigation >a:first')` – frogatto Jul 18 '13 at 07:40
but I want to know why the `$("#navigation >a")[0];` returns the href attribute of the first tag... – bohan Jul 18 '13 at 08:55
1

$("#navigation >a")[0] returns the DOM element. Don't use alert() to see what it returns as it only displays the href attribute. Try to use inspect element in Chrome or use firebug for firefox. – Setrákus Ra Jul 19 '13 at 03:51

score 3 · Answer 4 · answered Jul 18 '13 at 08:57

3

Use first() like this:

var element = $("#navigation>a").first();
console.log(element);

Reference

answered Jul 18 '13 at 08:57

EpokK

38,062
9
61
69

but I want to iterate the whole set not only the first one. and I want to know why the `$("#navigation >a")[0];` returns the href attribute of the first tag. – bohan Jul 18 '13 at 09:15
1

Your query: "I want to get the first DOM object but not the attribute of the first object" – EpokK Jul 18 '13 at 10:29

score 2 · Answer 5 · answered Jul 18 '13 at 07:30

2

In jQuery, when you use index like [0], it means you are access the DOM element. That is why

$("#navigation >a")[0]

returns <a> tag.

In order to iterate a jQuery selector result, use each

$("#navigation >a").each(function(index, elem){
});

answered Jul 18 '13 at 07:30

U.P

7,357
7
39
61

score -1 · Answer 6 · answered Jul 18 '13 at 07:29

-1

Try using

console.log($("#navigation >a"))

instead, so you can see all the results in the console ( cmd + alt + i in chrome)

answered Jul 18 '13 at 07:29

Jonas Grumann

10,438
2
22
40

how to iterate a result of jquery selector

6 Answers6

Linked

Related