Есть 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">
Почему так получается?