Question

我对jQuery和JS非常陌生。我需要脚本扫描页面并用包装div替换任何分类为'圆形'的图像，这样我就可以通过css3应用圆角。我完成的代码完美无缺，除非页面上有超过1个图像，它只返回第一个图像3次而不是3个单独的图像。

以下代码 - 非常感谢任何帮助。

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

代码效果很好，但每个<img>都会更改为第一张图片。某些函数适用于所有匹配的元素，例如css或wrap，但有些函数仅用于第一个元素 < - >那些是您希望返回单个元素的函数值 - attr，在这种情况下。

您应该使用：

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

另见：

.attr() - “获取匹配元素集合中第一个元素的属性值。”
.each()

Answer 2

您可以使用 each 功能来迭代图片集。像

这样的东西

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 3

当您调用“attr”来设置这些初始变量时，您只是从您找到的第一个图像中获取属性值。

Answer 4

查看.each()，了解如何将某些内容应用于选择器匹配的所有结果。

Answer 5

谢谢大家 - 第一次发布海报，我会回到宝贵的帮助之中。我最终选择了这个并且它完美无缺 - 再次感谢

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

使用jQuery替换多次

5 个答案: