jquery - 将 child 附加到具有相同类名的不同元素

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/table 单独转换？

在此处查看结果: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);