Use 'alt' value to dynamically set 'title'

Question

I need some help, and before we get going, I know it is probably not best practice, but I am doing some maintenance to an existing site and need to accomplish the following for a fix.

<a rel="lightbox" href="site.com" title="a generated title">
    <img src="site.com/img" class="post-image" alt="a long description"/>
</a>

Okay, so I am trying to figure out how to use jQuery or any other method to take the alt attribute from my image, and dynamically overwrite the title attribute of my a tag.

Any help would be awesome, I am kinda lost at this juncture.

score 7 · Accepted Answer · answered Jun 28 '12 at 15:16

7

$(function(){
   $("a").each(function(){
        $(this).attr("title", $(this).find("img").attr("alt"));
   });
});

answered Jun 28 '12 at 15:16

Curtis

101,612
66
270
352

Sir, you are a scholar and a gentlemen. That seemed so obvious, not sure why I didn't see it. Nonetheless. Thank you! – Brock Jun 28 '12 at 15:34

score 2 · Answer 2 · answered Jun 28 '12 at 15:17

2

you didn't mention exactly which <a>s you wanted to change, so this would change all <a>s with an <img> inside...

$("a>img").each(function() {
  $(this).parent().attr("title", $(this).attr("alt"))
})

answered Jun 28 '12 at 15:17

Rodolfo

4,155
23
38

score 0 · Answer 3 · answered Jun 28 '12 at 15:16

0

With jQuery:

var a = $('a[rel=lightbox])');
var img = a.find('img');
a.attr('title', img.attr('alt'));

answered Jun 28 '12 at 15:16

Attila Szeremi

5,235
5
40
64

j08691 · Answer 4 · 2012-06-28T15:23:35.190

0

$('a').each(function(){
    $(this).attr('title',$(this).find('img').attr('alt'));
});

Since jsFiddle.net seems to be flaky over the last day or so, you can see a demo at jsbin.

And if jsFiddle loads, a jsFiddle example.

edited Jun 28 '12 at 15:23

answered Jun 28 '12 at 15:17

j08691

204,283
31
260
272

score 0 · Answer 5 · answered Jun 28 '12 at 15:17

You can do it like this:

$(function() {
    var img = $(".post-image");
    if(img.length == 1) // meaning, at least one element was found
    {
        img.attr("title", img.attr("alt")); // pass the text in alt to title
        img.removeAttr("alt");              // remove alt
    }
});

Use 'alt' value to dynamically set 'title'

5 Answers5

Linked