Зацикливание на div для нескольких изображений

Question

Моя проблема в том, что я хочу создать много экземпляров нижеприведенного div, но с разными атрибутами изображения.Я хочу увеличить имя изображения на 1, используя цикл for.Например: <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 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 новым 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 этого: https://jsfiddle.net/zephyr_hex/ok6uv154/