Question

I have:

<li class="ingredient">
<div>
<span class="amount">1 lb</span>
<span class="name">asparagus</span>
</div>

i want to use jQuery to get:

<li class="ingredient">
<img class="myImage" title="Yes!!! asparagus" src="/white2x2.gif">
<div>
<span class="amount">1 lb</span>
<span class="name">asparagus</span>
</div>

so far I got:

 $(".ingredient div").before("<class='myImage' src="/white2x2.gif' />");

but how do I get the title in there. Note that there is lots of these on the page and I want the title to represent the element.

Many thanks!

Answer 1

based on your comments, this should do it for you.

$('.ingredient div').each(function() {
  var name = $(this).find('.name').text();
  $(this).before($('<img />').attr({class:'myimage', src:'/white2x2.gif',title:name}));
});

here’s a jsfiddle