Remplacer plusieurs fois en utilisant jQuery

Question

Je suis extrêmement nouveau pour jQuery et JS en général. J'ai besoin du script pour scanner une page et remplacer toutes les images classées 'arrondies' par un div wrapper afin que je puisse appliquer des coins arrondis via css3. Le code que j'ai fait fonctionne parfaitement, sauf s'il y a plus d'une image sur la page, il renvoie juste la première image 3 fois au lieu de 3 images distinctes.

Code ci-dessous- toute aide est grandement appréciée.

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

Le code fonctionne presque bien, mais chaque changement <img> à la première image. Certaines fonctions fonctionnent pour tous les éléments correspondants, comme css ou wrap, mais certains fonctionnent uniquement pour le premier élément - ce sont les fonctions que vous attendez de retourner une seule valeur - attr, dans ce cas.

Vous devez utiliser:

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

Voir aussi:

• .attr() - "Obtenir la valeur d'un attribut pour le premier élément dans l'ensemble des éléments correspondants."
• .each()

Answer 2

Vous pouvez utiliser la fonction each à itérer la collection d'images. Quelque chose comme

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

Lorsque vous appelez « attr » pour mettre en place ces variables initiales, vous êtes juste la valeur d'attribut de la première image que vous trouvez.

Answer 4

Jetez un oeil à .each() pour avoir une idée de la façon d'appliquer quelque chose à tous les résultats d'un match de sélection.

Answer 5

merci à tous - première fois poster et je serai de retour aide inestimable. J'ai fini par aller avec cela et cela fonctionne parfaitement - merci encore

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