如何使用jQuery克隆和更改表的所有ID？

Question

我想克隆一個table並更改其所有ID的添加前綴。

在下面的代碼片段中，我更改所有tr元素ID的前綴my_，使用.find('tr').each(function()。

使用jQuery，如何在克隆期間向表中的所有ID添加前綴名稱？

var $newTable = $('table.copyable:first').clone(); 
 
$newTable.removeClass('copyable'); 
 
$newTable 
 
    .find('tr') 
 
    .each(function() { 
 
    $(this).attr('id', 'my_'+$(this).attr('id')); 
 
    }); 
 

 
$('#list-player-songs').html(''); 
 
$newTable.appendTo($('#list-player-songs'));

table.copyable { 
 
    background: antiquewhite; 
 
} 
 
table td { 
 
    border:1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h3>Original table</h3> 
 
<table class="copyable"> 
 
    <tbody class="sortable"> 
 
    <tr id="track251"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="love.mp3" id="play251"></div></td> 
 
     <td id="song-url251">love</td> 
 
    </tr> 
 
    <tr id="track241"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="hate.mp3" id="play241"></div></td> 
 
     <td id="song-url241">hate</td> 
 
    </tr> 
 
    <tr id="track233"> \t \t \t \t \t \t \t 
 
     <td><div data-track-name="think.mp3" id="play233"></div></td> 
 
     <td id="song-url233">think</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<h3>Copied elements</h3> 
 
<div id="list-player-songs"></div> 
 

 
<hr/> 
 
<br/><br/><br/>

Answer 1

搜索所有的ID，並使用attr(function)將在本身做一個each內部

$newTable 
    .find('[id]') 
    .attr('id', function(_, id){ 
     return 'new-prefix' + id; 
    }) 

Answer 2

您可以搜索具有id ATTR這樣的每一個元素：

$newTable 
    .find('[id]') 
    .each(function() { 
     $(this).attr('id', 'my_'+$(this).attr('id')); 
    }); 

這樣的話，它會改變一個具有ID集合中的每個元素的id 。

沒有設置ID的元素將不會被更改。