Question

I’m a jQuery newbie.
I’ve something like the following HTML:

<div class=dcsns-youtube>
    <span class="section-thumb">
        <a href="some-link"><img src="http://img.youtube.com/vi/m4-1FZeoBtQ/default.jpg" alt=""></a>
    </span>
    <span class="section-title">
        <a href="some-link">Text on the link</a>
    </span>
<div>

I want to get the text that is inside the a element inside the span with the class “section-title”, on the example “Text on the link” an use it as a title on the a element inside the span with the class “section-thumb”.

The following jQuery code only works for one single div:

jQuery('.dcsns-youtube .section-thumb a').attr('title', $('.dcsns-youtube .section-title').text());

How can I make this work if I have several divs, adding to each a element inside span with the class “section-thumb” the respective on the text from the a element inside the span with the class “section-title”?

Answer 1

You could do this :

$('.dcsns-youtube').each(function(){
  $('.section-thumb a', this).attr('title', $('.section-title', this).text());
});

$(someselector, this) searches for elements inside this.

Demonstration

You might also pass a callback to attr :

$('.dcsns-youtube .section-thumb a').attr('title', function(){
      return $(this).closest('.dcsns-youtube').find('.section-title a').text();
});

Demonstration