javascript - Title of each image in jQuery -

i making slideshow site. images need background images, , need image title quote on top of image. problem shows title of first background-image on images. somehow need title of individual images.

var $sliderimages = $('.slideshow .field-name-field-image-carousel img'); var $sliderimagestitle = $sliderimages.attr('title');      $sliderimages.each(function(i, elem) {                          // create divs       var img = $(elem);       var div = $("<div class='sliderimage' />").css({         background: "url(" + img.attr("src") + ") no-repeat",       }).append("<figcaption><span>" + $sliderimagestitle + "</span></figcaption>");       img.replacewith(div);                                         // replace images divs     });      $('.sliderimage').wrap("<figure />");                           // start wrapping rendered images     $('.slideshow figure:first-of-type').addclass('show');          // , choose 1 display first 

when use getter version of .attr() in set of elements, return attribute value of first element in set, not of other elements.

since iterating through image elements, can read value loop

var $sliderimages = $('.slideshow .field-name-field-image-carousel img');  $sliderimages.each(function (i, elem) { // create divs     var img = $(elem);     var div = $("<div class='sliderimage' />").css({         background: "url(" + img.attr("src") + ") no-repeat",     }).append("<figcaption><span>" + img.attr('title') + "</span></figcaption>");     img.replacewith(div); // replace images divs });  $('.sliderimage').wrap("<figure />"); // start wrapping rendered images $('.slideshow figure:first-of-type').addclass('show');