将子项附加到具有相同 class 名称的不同元素

Question

使用自定义 CMS "Form Builder"，我编写了一个扩展表格，其中包含每首音乐的复选框列表 "Category" 以从中选择不同的歌曲。该表单以 table 格式写入 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之前在它们自己的 table 中分开。我怎样才能得到它，以便每个 ul/table 单独转换？

在此处查看结果：http://dev601.webdugout.com/Song-Requests

Answer 1

您应该迭代每个 checkList table 并创建 UL。截至目前，您正在迭代 table 行，因此您将获得一个无序列表

//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);

将子项附加到具有相同 class 名称的不同元素

Appending children to different elements with same class name

html

css

jquery

content-management-system