我正在尝试根据数字字段的数字输入克隆一组文本。看来我得到的代码只是将项目一次 append 到 .wrap
中元素。 .clone()
有限制吗?或者我忽略的其他东西只会 append 一次该项目?
我期望发生的事情:
我希望在下面的代码中发生的是 .duplicate
值已更新(假设为 3),.target
元素被克隆,然后是 .wrap
元素被清空,循环运行并 append 存储在 $clone
中的 3 个克隆.决赛.wrap
元素应包含 3 <h2>Target</h2>
元素。
发生了什么:
上面似乎发生了,但最后只有 1 <h2>Target</h2>
元素 append 到 .wrap
元素。
代码:
$( 'body' ).change( '.duplicate', function() {
var count = $( '.duplicate' ).val(),
$clone = $( '.target' ).clone(),
i = 1;
$( '.wrap' ).html( '' );
while ( i <= count ) {
$( '.wrap' ).append( $clone );
i++;
}
} );
.duplicate {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="number" class="duplicate" value="1" min="1" max="5">
<div class="wrap">
<div class="target">
<h2>Target</h2>
</div>
</div>
最佳答案
每次迭代都需要一个新的克隆,否则每次都只是简单地移动原始的
此外,一旦您拥有多个此类,您只想克隆其中一个
$clone = $( '.target' ).first().clone()
while ( i <= count ) {
$( '.wrap' ).append( $clone.clone() );
关于javascript - jQuery 克隆元素仅在循环内 append 一次克隆项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53353430/