How to set a label's title based on it's inner HTML?

Question

I have an html form field with lots of checkboxes.

How to set a label's title attbibased on it's inner HTML? I need to do this for all titles.

For example, I need to transform

<div id=field>
  <label class='option'>Ski</label>
  <label class='option'>Hockey</label>
  <label class='option'>Baseball</label>
</div>

to:

<div id=field>
  <label title='Ski' class='option'>Ski</label>
  <label title='Hockey' class='option'>Hockey</label>
  <label title='Baseball' class='option'>Baseball</label>
</div>

I tried the following jQuery code:

$('#field label.option').attr('title',$(this).html());  

but it gives me tons of garbage.

So how to get the value inside each matching label?

This is jQuery 1.4.4.

Please advise.

Answer 1

$('#field label.option').attr('title',function(){ return $(this).text() });

Answer 2

title attributes should contain text only, so you'd be better to user text():

$('#field label.option').prop('title', function() { return $(this).text(); });

If you absolutely have to set the title to the inner HTML, use html():

$('#field label.option').prop('title', function() { return $(this).html(); });

jsFiddle Demo

Answer 3

this may help you

$('.option').each(function(i,lbl)
   {
       $(lbl).attr('title',$(this).html());
   }
);