將孩子追加到具有相同班級名稱的不同元素

Question

使用自定義CMS的「表單構建器」，我編寫了一個擴展表單，併爲每個音樂「類別」的複選框列表選擇不同的歌曲。形式寫入HTML表的格式，所以我用下面的代碼，將其轉換成一個無序列表格式，這是可以分解成兩列：

$(document).ready(function() { 
    var ul = $("<ul class='songList'>"); 
    $(".checkList tr").each(function(){ 
     var li = $("<li>") 
     $("td", this).each(function(){ 
      var p = $("<p>").html(this.innerHTML); 
      li.append(p); 
     }); 
     ul.append(li); 
    })  
$(".checkList").replaceWith(ul); 
$('.songList').cols(2); 

我得到了UL和期望的結果兩列，而不是將每個TABLE轉換爲具有自己的LI的UL，則使用先前在其自己的表中分離的所有LI來編譯LI的兩個長的巨大UL。我怎樣才能得到它，以便每個ul /表單獨轉換？

看到結果這裏：http://dev601.webdugout.com/Song-Requests

Answer 1

你應該遍歷每個checkList表並創建UL。到目前爲止，您正在迭代表格行，因此您會得到一個單一的無序列表

//Iterate each table 
$("table.checkList").each(function(){ 
    //create ul for each table 
    var ul = $("<ul class='songList'>"); 

    //Iterate on current table 
    $("tr", this).each(function(){ 
     var li = $("<li>") 
     $("td", this).each(function(){ 
      var p = $("<p>").html(this.innerHTML); 
      li.append(p); 
     }); 
     ul.append(li); 
    }); 

    //Replace current table with ul 
    $(this).replaceWith(ul); 
}); 

$('.songList').cols(2);