CODEWITHSUNDEEP
jquery
Jeremy A. West
Jeremy A. West

Reputation: 2300

Alter title attribute to reflect element text value using JQuery

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.

Upvotes: 0

Views: 1714

Answers (2)

jrummell
jrummell

Reputation: 43067

Assuming that you want to set the title for each element with the ellipsis class, you can do this:

$(".ellipsis").each(function(){
    $this = $(this);
    $this.attr("title", $this.text());
});

Update

As @Pointy pointed out, in jQuery 1.6+, it's probably better to use .prop() over .attr(), even though most usages should give you same result. See .prop() vs .attr() if you want to know why.

Upvotes: 0

Pointy
Pointy

Reputation: 413702

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.

Upvotes: 3

Related Questions