Question

我正在尝试克隆现有图层（$('.total-row').first()），然后删除所有这些图层（$('.total-row')），并从克隆图层添加一些自定义图层。这是JS-JQuery代码：

$(document).on('click', '.playOnAP',function() {
var clon = $('.total-row').first().clone(true)              
$('.total-row').remove();

$('#mp3-list ul li',this).each( function( index, element ) {
    $('.jspPane').append(clon);
    var totalTitle = $('.total-title').eq(index);
    totalTitle.attr('src', $(this).text() );                                                //url canción
    totalTitle.text($(this).text().slice(($(this).text().search("\/[^\/]+$")) + 1));    //canción
    totalTitle.siblings( '.total-artist' ).text(artista);                               //artista
    totalTitle.attr('imagen', caratula);
});     
}

这是html：

<div class="jspPane" style="padding: 0px; top: 0px; width: 300px;">
  <div class="total-row can-play" onclick="" style="background-color: rgb(251, 251, 251);">
    <div class="total-checked" onclick="" type="checkbox"></div>
    <div class="total-not-playing total-playing"></div>
    <div class="total-title" src="http://dcodedmagazine/wp-content/uploads/2013/12/Portishead_-_03_-_Undenied.ogg">titulo canción</div>
        <div class="total-artist">artista</div>
    <div style="clear:both;"></div>
  </div>
  <div class="total-row can-play" onclick="" style="background-color: rgb(251, 251, 251);">
    <div class="total-checked" onclick="" type="checkbox"></div>
    <div class="total-not-playing total-playing"></div>
    <div class="total-title" src="http://dcodedmagazine/wp-content/uploads/2013/12/01.-Bored.ogg" imagen="<img src="http://dcodedmagazine/wp-content/uploads/2013/12/AlbumArt_6EC70FCA-D8CB-4DB1-955C-40F2E6CD2AB4_Large-150x150.jpg" class="attachment-100x100 wp-post-image" alt="AlbumArt_{6EC70FCA-D8CB-4DB1-955C-40F2E6CD2AB4}_Large" height="100" width="100">">01.-Bored.ogg</div>
    <div class="total-artist">Deftones</div>
    <div style="clear:both;"></div>
  </div>
  <div class="total-row can-play" onclick="" style="background-color: rgb(251, 251, 251);">...
</div>

问题是它只添加$('#mp3-list ul li',this)中的第一个$('.playOnAP')元素，而应添加其他兄弟图层。

Answer 1

如评论中所述，克隆元素只返回一个克隆，因此当多次附加它时，您只是移动克隆元素。作为一个简单的修复，您可以添加一个新的克隆：

$('.jspPane').append(clon.clone(true));

添加已删除原始图层的克隆

1 个答案: