使用jQuery替換多次

我對jQuery和JS非常陌生。我需要腳本來掃描一個頁面，並用一個包裝div來替換任何歸類爲「圓形」的圖像，這樣我就可以通過css3應用圓角。我所做的代碼完美工作，除非頁面上有1個以上的圖像，它只是返回第一個圖像3次而不是3個單獨的圖像。使用jQuery替換多次

以下代碼 - 非常感謝您的幫助。

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

來源

2010-02-23 jquery n00b

該代碼工作得很好，但是將每個<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()

來源

2010-02-23 05:37:32 Kobi

可以使用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"); 
});

來源

2010-02-23 05:36:54 rahul

當調用「ATTR」來設置這些初始變量，你剛剛從你找到的第一個圖像的屬性值。

來源

2010-02-23 05:38:11 Pointy

看看.each()瞭解如何將某些東西應用於選擇器匹配的所有結果。

來源

2010-02-23 05:38:57 Amber

謝謝大家 - 第一次海報，我會回來寶貴的幫助。我結束了去這個，它完美的作品 - 再次感謝

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

來源

2010-02-23 23:07:44

使用jQuery替換多次

回答

相關問題