循环遍历多个图像的 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 结尾）。

更新： I want to use multiple images for the same kind of div. So instead of creating many divs that are the same but differ with image I want to use a for loop to change the image name

下面是我要这样做的 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);
  });
});

用新的图片 url 替换现有的 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/