jquery .each() loop

Question

i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:

$('.vm-video-title').each(function(i) {//all divs
    $(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
    });

but i have the problem that it reads ALL the links of all divs and put them in one div.

example:

<div class="vm-video-title"><a href="...">Text1</a></div>
<div class="vm-video-title"><a href="...">Text2</a></div>
<div class="vm-video-title"><a href="...">Text3</a></div>

output:

<a href="...">Text1</a>Text1Text2Text3
<a href="...">Text2</a>Text1Text2Text3
<a href="...">Text3</a>Text1Text2Text3

wanted output:

<a href="...">Text1</a>Text1
<a href="...">Text2</a>Text2
<a href="...">Text3</a>Text3

user113716 · Accepted Answer · 2011-07-09 21:19:44Z

4

You can select the <a> elements directly, and use the after()^[docs] method to append the content of each after each one respectively.

$("div.vm-video-title > a").after(function() { return $(this).text(); });

This doesn't do a "destroy then recreate" of the existing elements like the html()^[docs] method will.

Working example: http://jsfiddle.net/CCr9C/

answered Jul 9, 2011 at 21:19

user113716

323k64 gold badges454 silver badges441 bronze badges

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

Comments

Mo Valipour · Accepted Answer · 2011-07-09 21:13:33Z

3

This should do the job for you,

you need to find the div inside current element in the loop (el).

$('.vm-video-title').each(function(i, el) {
    el = $(el);
    el.html(el.html()+el.find("a").text());
});

in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)

answered Jul 9, 2011 at 21:13

Mo Valipour

13.5k13 gold badges64 silver badges87 bronze badges

Comments

amantur · Accepted Answer · 2011-07-09 21:15:27Z

1

You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )

$('.vm-video-title').each(function(i) {//all divs
   $(this).html($(this).html()+$("a", this).text());
});

answered Jul 9, 2011 at 21:15

amantur

40.6k22 gold badges136 silver badges192 bronze badges

2 Comments

Mo Valipour Over a year ago

using "this" is always confusing in js, using a named variable is recommended wherever possible. function(i, el) in this case.

amantur Over a year ago

@patrick's method (after) is better as it will not recreate dom elements.

Collectives™ on Stack Overflow

jquery .each() loop

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related