How can I loop through all
elements?

Question

I want to loop through all of the paragraph elements in my document and adjust their html. Currently I use some jquery:

console.log("loop through <p> elements");    

$("p").each(function()
{
    console.log("next <p> element with id: " + this.id);
});

However only "loop through paragraph elements" appears in the console and I have a few paragraph elements with unique ids in my body:

<body>
    <p id="para1"> paragraph 1 </p>
    <p id="para2"> paragraph 2 </p>     
    <p id="para3"> paragraph 3 </p> 
</body>

I am hoping it is some kind of syntax error with the .each() loop and that someone can correct me, any help would be much appreciated.

$.each($("p"),function(){console.log("next
element with id: " + $(this).attr('id'));}); — Reza-S4, Dec 15 '14 at 22:14

score 6 · Accepted Answer · answered Dec 15 '14 at 22:12

6

You code should be:

$("p").each(function()
{
    console.log("next <p> element with id: " + $(this).attr('id'));
});

Because $(this).id does not exist, or this.id is valid too.

LIVE DEMO

answered Dec 15 '14 at 22:12

Wilfredo P

3,959
25
44

that's correct, I forget it :) – Wilfredo P Dec 15 '14 at 22:16
I correct it to this and it still only outputs "loop through paragraph elements" as if there are no paragraph elements. Thank you though. – jctwood Dec 15 '14 at 22:19
You can use `this.id` – Rory McCrossan Dec 15 '14 at 22:20
3

@jctwood You need to put your code inside ready handler... – Bhojendra Rauniyar Dec 15 '14 at 22:21
Also check whether you are adding jQuery Library. – Wilfredo P Dec 15 '14 at 22:23
1

@Bhojendra - C-Link Nepal thank you this solved the problem! – jctwood Dec 15 '14 at 22:25

score 2 · Answer 2 · answered Dec 15 '14 at 22:13

2

You should use

$("p").each(function() {
    console.log("next <p> element with id: " + this.id);
});

id is a property of Element instances like this. If you wrap it into a jQuery element, it will no longer have the id property, so you will have to get it using jQuery methods like $(this).prop('id'). That is unnecessary, though.

answered Dec 15 '14 at 22:13

Oriol

225,583
46
371
457

I correct it to this and it still only outputs "loop through paragraph elements" as if there are no paragraph elements. Thank you though. – jctwood Dec 15 '14 at 22:20
@jctwood It works for me: http://jsfiddle.net/aokj1fjp/ – Oriol Dec 15 '14 at 22:21
Don't forget to put your code in a ready handler. JSFiddle omits this because it does it for you automatically. – Rory McCrossan Dec 15 '14 at 22:22

ElGavilan · Answer 3 · 2014-12-15T22:25:51.423

0

jQuery objects do not have an id property. To get the ID of the element, use $(this).attr('id').

If it still does not loop through the tags, then it is probably running before the DOM has a chance to finish loading. Placing your code inside a ready handler will delay execution until the DOM has fully loaded:

$(document).ready(function() {
    console.log("loop through <p> elements");    

    $("p").each(function()
    {
        console.log("next <p> element with id: " + $(this).attr('id'));
    });
});

edited Dec 15 '14 at 22:25

answered Dec 15 '14 at 22:14

ElGavilan

5,747
16
24
35

I correct it to this and it still only outputs "loop through paragraph elements" as if there are no paragraph elements. Thank you though. – jctwood Dec 15 '14 at 22:20
1

@jctwood Is your code inside of a ready handler? It may be executing before the DOM is fully loaded, meaning the `
` tags aren't even rendered yet.
– ElGavilan Dec 15 '14 at 22:23

score 0 · Answer 4 · answered Dec 15 '14 at 22:18

0

Do you get the error: Uncaught ReferenceError: $ is not defined? If this is the case load the JQuery library. Add this on to the Head of your html document.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

answered Dec 15 '14 at 22:18

Gijs Mater

281
2
5

1

No I have included jquery correctly. – jctwood Dec 15 '14 at 22:19

How can I loop through all elements?

4 Answers4

How can I loop through all
elements?