Javascript: Loop Through every child node

Question

so for example i have a brunch of pages create by easytab which looks like below in HTML

<div class="tab-page1 identify">//something</div>

<div class="tab-page2 identify">//something</div>

<div class="tab-page3 identify">//something</div>

<div class="tab-page4 identify">//something</div>

And I'd like to add something in to the contents so i created a function like below

$(".identify").html("123");

I know i can do something like to add something in the last child but i'd like to add 123 in every child how may i do it?

$(".identify:last-child").html("123");

guest271314 · Accepted Answer · 2016-05-09 04:20:49Z

1

And I'd like to add something in to the contents

but i'd like to add 123 in every child how may i do it?

You can use .html(function) to add new html to existing html content.

$(".identify").html(function(index, html) {
  return html + 123
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-page1 identify">//something</div>

<div class="tab-page2 identify">//something</div>

<div class="tab-page3 identify">//something</div>

<div class="tab-page4 identify">//something</div>

answered May 9, 2016 at 4:20

guest271314

1

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

Comments

Steve · Accepted Answer · 2016-05-09 04:06:51Z

0

You can use the .each function to iterate each found node and perform a function:

$(".identify").each(function(){
    $(this).html("123");
});

Example JSFiddle

answered May 9, 2016 at 4:06

Steve

9,63511 gold badges57 silver badges86 bronze badges

4 Comments

Anson Aştepta Over a year ago

i am using easyTab so this seem only works on the first page

Steve Over a year ago

Can you post a more complete example that demos this?

nnnnnn Over a year ago

$(".identify").html("123"); has the same result, the .each() part is redundant.

guest271314 Over a year ago

@Steve "And I'd like to add something in to the contents"

Arun Sharma · Accepted Answer · 2016-05-09 04:13:14Z

0

You don't need a loop to achieve this.Check it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#btn").click(function(){
        $(".identify").html("123");
    });
});
</script>


<div class="tab-page1 identify">//something</div>

<div class="tab-page2 identify">//something</div>

<div class="tab-page3 identify">//something</div>

<div class="tab-page4 identify">//something</div>

<button id="btn">Do it</button>

</body>

answered May 9, 2016 at 4:13

Arun Sharma

1,3298 silver badges11 bronze badges

Comments

Ali Panahian · Accepted Answer · 2016-05-09 04:30:59Z

0

use the append to add something to the existing content:

$(".identify").each(function(){
    $(this).append("123");
});

answered May 9, 2016 at 4:30

Ali Panahian

3002 silver badges6 bronze badges

Collectives™ on Stack Overflow

Javascript: Loop Through every child node

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related