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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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