循环遍历div以获取多个图像

Question

我的问题是我想创建以下div的许多实例，但是它们具有不同的图像属性。 我想使用for循环将图像名称加1。 例如： <div class="pm-gallery-post-item-container" style="background-image:url(img/gallery/2nd-white-coat1.jpg);">我想保持数字递增图像名称为n次。 因此，在第二次迭代中，我希望它成为<div class="pm-gallery-post-item-container" style="background-image:url(img/gallery/2nd-white-coat2.jpg);"> （请注意文件名以2）结尾。

更新： 我想对同一种div使用多个图像。 因此，与其创建许多相同但与图像不同的div，我不想使用for循环来更改图像名称

以下是我要执行的div：

<div class="isotope-item size3 col-lg-4 col-md-4 col-sm-12 col-xs-12 white-coat-talent all">

                <div class="pm-gallery-post-item-container" style="background-image:url(img/gallery/2nd-white-coat1.jpg);">

                    <div class="pm-gallery-post-item-info-container">

                        <div class="pm-gallery-item-excerpt">
                            <p>LPSA hosted a talent show “White Coat Talent”, showcasing the talents of pharmacy students from all over Lebanon at Saint Joseph University.</p>

                            <ul class="pm-gallery-item-btns">

                                <li><a class="fa fa-camera lightbox" data-rel="prettyPhoto[white-coat-talent]" href="img/gallery/white-coat-talent11.jpg"></a></li>
                                <li><a class="fa-bars" href="#"></a></li>
                            </ul>

                        </div>

                    </div>

                    <a class="pm-gallery-item-expander fa fa-plus" href="#"></a>

                </div>

                <div class="pm-gallery-item-title">
                    <p>White Coat Talent</p>
                </div>

            </div>

Answer 1

您可以使用字符串串联来构建图像URL的字符串。

var loops = 3;
for (var i = 2; i < (loops + 2); i++) {
  var newElem = $('<div/>').addClass('pm-gallery-post-item-container').css('background-image', 'url(img/gallery/2nd-white-coat' + i + '.jpg)');
  //do something with newElem, such as append to the DOM
}

如果您一次创建div元素，则以上内容将起作用。 如果需要多次运行，则需要跟踪下一个数字。 有几种方法可以做到这一点。 这是一种方法：

$(document).ready(function() {
  var iteration = 2;
  $('#myBtn').on('click', function() {
    var loops = 3;
    for (var i = iteration; i < (loops + iteration); i++) {
      var newElem = $('<div/>').addClass('pm-gallery-post-item-container').css('background-image', 'url(img/gallery/2nd-white-coat' + i + '.jpg)');
    }
    iteration += loops;
    console.log(iteration);
  });
});

要将现有的div替换为新的图片网址，请执行以下操作：

$(document).ready(function() {
  $('#myBtn').on('click', function() {
    var existingLi = $('.pm-gallery-post-item-container[style*="background-image:url"]');
    var style = existingLi.attr('style').split('-');
    var number = style[3].match(/\d+/);
    if (number !== null) {
      style[3] = style[3].replace(number, parseInt(number) + 1);
      var newStyle = style.join('-');
      $(existingLi).attr('style', newStyle);
    }
  });
});

小提琴演示： https ： //jsfiddle.net/zephyr_hex/ok6uv154/