Replace multiple times using jQuery.

Question

I'm extremely new to jQuery and JS in general. I need the script to scan a page and replace any images classed 'rounded' with a wrapper div so I can apply rounded corners through css3. The code I've done works perfectly except if there's more than 1 image on the page, it just returns the first image 3 times instead of 3 separate images.

Code below- any help is greatly appreciated.

var imageWrap = jQuery("img.rounded").attr("src");
var imageWrapWidth = jQuery("img.rounded").attr("width");
var imageWrapHeight = jQuery("img.rounded").attr("height");
var imageWrapAlt = jQuery("img.rounded").attr("alt");
jQuery("img.rounded").wrap("<div class='image-wrapper'><p></p>" + "</div>");

jQuery(".image-wrapper").css({'background' : 'transparent url('+imageWrap+') no-repeat 0 0','width':imageWrapWidth,'height':imageWrapHeight}  );
jQuery(".image-wrapper p").text(imageWrapAlt);
jQuery('img.rounded').hide();

Answer 1

You can use the each function to iterate through the images collection. Something like

jQuery("img.rounded").each(function(){
    //$(this) will get you the current image element
    // save the reference to a variable so that each time you won't have 
    //     to access the DOM element.
    var currElem = $(this); 
    var imgSrc = currElem.attr("src");
});

Answer 2

The code works almost well, but is changes each <img> to the first image. Some functions work for all matched elements, like css or wrap, but some work only for the first element - those are the functions that you'd expect to return a single value - attr, in this case.

You should use:

jQuery("img.rounded").each(function(){
  var img = jQuery(this);
  var imageWrap = img.attr("src");
  var imageWrapWidth = img.attr("width");
  var imageWrapHeight = img.attr("height");
  var imageWrapAlt = img.attr("alt");

  //next, the '.image-wrapper' selector is also wrong - it selects all new wraps.
  var wrapper = jQuery("<div class='image-wrapper'><p></p>" + "</div>")
          .css(
               {'background' : 'transparent url('+imageWrap+') no-repeat 0 0',
                'width':imageWrapWidth,'height':imageWrapHeight})
         .text(imageWrapAlt);
  img.wrap(wrapper).hide();
});

See also:

• .attr() - "Get the value of an attribute for the first element in the set of matched elements."
• .each()

Answer 3

When you call "attr" to set up those initial variables, you're just getting the attribute value from the first image that you find.

Answer 4

Take a look at .each() to get an idea of how to apply something to all of the results from a selector match.

Answer 5

thanks everyone- 1st time poster and I'll be back- invaluable help. I ended up going with this and it works perfectly- thanks again

jQuery("img.rounded").each(function(){ var img = jQuery(this); var imageWrap = img.attr("src"); var imageWrapWidth = img.attr("width"); var imageWrapHeight = img.attr("height"); var imageWrapAlt = img.attr("alt"); jQuery(this).wrap("" + "

"); jQuery(this).parent().parent().css({'background' : 'transparent url('+imageWrap+') no-repeat 0 0','width':imageWrapWidth,'height':imageWrapHeight} ); jQuery(this).parent().text(imageWrapAlt); jQuery(this).hide(); });