2

Есть div, внитри него один элемент-образец. Вот так:

<div id='pcont'>
    <p class='pclass'>sample</p>
</div>

нужно скопировать этот образец несколько раз и вставить в этот же div. В случае с <p> у меня это легко получилось вот такой функцией:

  function initP() {
    var $keeper = $('#pcont');
    var $sample = $keeper.children('.pclass').eq(0);

    for (var i=0; i<3; i++) {
      var $nn=$sample.clone();
      $nn.text('cloned #'+i);
      $sample.append($nn);
    }
  }

Проблема в том, что практически такой же код не срабатывает, когда образцом является картинка. С таким кодом

  <div id='dcont' class='container'>
    <img class='box' src='example.png'>
  </div>

и вот такой функцией

  function initD() {
    var $keeper = $('#dcont');
    var $sample = $keeper.children('.box').eq(0);

    for (var i=1; i<=3; i++) {
      var $nn=$sample.clone();
      $nn.attr('alt','cloned #'+i);
      $sample.append($nn);
    }

    console.log('->', $keeper.html() );
  }

На экране отображается только одна картинка, но в консоли я вижу код, сгенерированный для целой кучи:

-> <img class="box" src="example.png"><img alt="cloned #1" class="box" src="example.png"><img alt="cloned #2" class="box" src="example.png"><img alt="cloned #1" class="box" src="example.png"><img alt="cloned #3" class="box" src="example.png"><img alt="cloned #1" class="box" src="example.png"><img alt="cloned #2" class="box" src="example.png"><img alt="cloned #1" class="box" src="example.png">

Почему так получается?

1 ответ 1

1

Потому что вы вставляете картинки внутрь друг-друга. Попробуйте ставить их рядом, и они будут отображаться.

  function initD() {
    var $keeper = $('#dcont');
    var $sample = $keeper.children('.box').eq(0);

    for (var i=1; i<=3; i++) {
      var $nn=$sample.clone();
      $nn.attr('alt','cloned #'+i);
      $sample.before($nn);
    }

    console.log('->', $keeper.html() );
  }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.