CODEWITHSUNDEEP
jqueryimageattributes
jquery n00b
jquery n00b

Reputation: 105

Replace multiple times using jQuery

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();

Upvotes: 3

Views: 1153

Answers (5)

jquery n00b
jquery n00b

Reputation: 105

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("<div class='image-wrapper'>" + "<p></p></div>");
    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();
});

Upvotes: 0

Kobi
Kobi

Reputation: 138007

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()

Upvotes: 4

Amber
Amber

Reputation: 526573

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

Upvotes: 0

Pointy
Pointy

Reputation: 413712

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

Upvotes: 0

rahul
rahul

Reputation: 187030

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");
});

Upvotes: 1

Related Questions