Заменить несколько раз с помощью jQuery

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

Вы можете использовать функцию каждый , чтобы выполнить итерацию по коллекции изображений. Что-то вроде

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

спасибо всем - первый раз постер и я вернусь - неоценимая помощь. Я закончил с этим, и он работает отлично - еще раз спасибо

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

Answer 4

Взгляните на .each(), чтобы получить представление о том, как применить что-либо ко всем результатам совпадения селектора.

Answer 5

Когда вы вызываете «attr» для установки этих начальных переменных, вы просто получаете значение атрибута из первого найденного изображения.