How do I use JQuery to do this? (Loop through the classes)

Question

Suppose my code is like this:

<td class="apple">
<div class="worm">
text1
</div>
</td>

<td class="apple">
<div class="worm">
text2
</div>
</td>

<td class="apple">
<div class="worm">
text3
</div>
</td>

How can I loop through everything with "td class apple", and then grab the text of the div inside with id "worm", and then set each of the .attr() as that text?

Result:

<td class="apple" title="text1">
<div class="worm">
text1
</div>
</td>

<td class="apple" title="text2" >
<div class="worm">
text2
</div>
</td>

<td class="apple" title="text3">
<div class="worm">
text3
</div>
</td>

Thank you

Answer 1

$('td.apple').each(function () {
    $(this).attr('title', $('div.worm', this).text());
});

Or this shorter version (supported as of jQuery 1.4):

$('td.apple').attr('title', function () {
    return $('div.worm', this).text();
});​

Answer 2

This should do the trick.

//We will iterate through each td which has class of apple.
$('td.apple').each(
   function()
   {
       //'this' in the function refers to the current td.
       //we will try to find a div with class 'worm' inside this td.
       var title = $(this).find('div.worm').text();
       $(this).attr('title', title);
   }
);

Answer 3

I assume you mean td class="apple"

$("td.apple").each(function(){
  this.title=$(this).find("div").text();
});

If you're using me to do your school homework I will lock you in a phone booth full of bees.

Answer 4

To add to the correct responses, I would recommend using children rather than find. Children is not recursive, any bit of optimization helps. Unless you need recursion through the TD's.

$("td.apple").each(function() {
    $(this).attr('title', $(this).children("div.worm").text());
});