Question

I would like to set the title attribute = to the inner text of a span, paragraph, or div tag using JQuery in the document.ready function.

This is my markup:

<span class="ellipsis">Text inside span tag.</span>
<p class="ellipsis">Text inside paragraph tag.</p>
<div class="ellipsis" >Text inside div tag tag.</div>

I would like to add title attributes to create markup like this:

<span class="ellipsis" title="Text inside span tag.">Text inside span tag.</span>
<p class="ellipsis" title="Text inside paragraph tag.">Text inside paragraph tag.</p>
<div class="ellipsis" title="Text inside div tag tag.">Text inside div tag tag.</div>

I understand how to change the title attribute I just can’t seem to find away to change it to the specific elements value or text.

Answer 1

Try:

$('.ellipsis').each(function() {
  $(this).prop('title', $(this).text());
});

The .each() function is really useful in cases like this: cases in which you need something from each element individually in order to do something to the elements.