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

Question

My problem is I want to create many instances of the below div however with different image attributes. I want to increment the image name by 1 using a for loop. For example: <div class="pm-gallery-post-item-container" style="background-image:url(img/gallery/2nd-white-coat1.jpg);"> I want to keep increment the number in the image name for n times. So in the second iteration I want it to be <div class="pm-gallery-post-item-container" style="background-image:url(img/gallery/2nd-white-coat2.jpg);"> (notice how the file name ends with 2).

UPDATE: 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

Below is the div I want to do this to:

<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

You can use string concatenation to build the string for the image 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
}

The above will work if you're creating the div elements one time. If this needs to run more than once, you will need to track what number is next. There are several ways to do that. Here's one way:

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

To replace the existing div with a new image url:

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

Fiddle Demo of this: https://jsfiddle.net/zephyr_hex/ok6uv154/