Adding a html value to the attribute of an image

Question

I'm having an issue with this.. is the value gets added but only the first h2 tag. What am I missing?

Thanks

My goal is to grab the value of the h2 tag and add the value to the image as an alt and title tag.

Below is my HTML and JS. Here is my jsFiddle File.

HTML

<ul class="list">
  <li>
    <img title="Product" src="/img.jpg" />
    <h2>Blue</h2>
  </li>
  <li>
    <img title="Product" src="/img.jpg" />
    <h2>Red</h2>
  </li>
  <li>
    <img title="Product" src="/img.jpg" />
    <h2>Yellow</h2>
  </li>
</ul>

JS

var imageID = $('.list').find('h2').html();

$("img").attr('title', imageID + ' Product');

Zoltan Toth · Accepted Answer · 2012-11-08 20:27:03Z

4

Try this

$(".list img").each(function() {
    var txt = $(this).siblings("h2").text();
    $(this).prop("alt", txt).prop("title", txt + " Product");
});

DEMO - use Firebug or similar to review

edited Nov 8, 2012 at 20:27

answered Nov 8, 2012 at 20:10

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

breezy Over a year ago

This worked. However, how can I add the h2 value to the title attribute & alt and also append custom text to the end of the title attribute on the image? Similar to how i originally had it.. $("img").attr('title', imageID + ' Product');

Zoltan Toth Over a year ago

Just set the title parameter exactly the same way as you have set the alt - see updated answer

mgraph · Accepted Answer · 2012-11-08 20:10:43Z

2

try this :

$("img").each(function(){
   $(this).attr('title', $(this).closest("li").find("h2").text()+ ' Product');
})

answered Nov 8, 2012 at 20:10

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Collectives™ on Stack Overflow

Adding a html value to the attribute of an image

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related