jquery - 将表格转换为列表分组 3 行

Question

在 SharePoint 中，它有一个令人讨厌的习惯，那就是到处使用嵌套表。我想在其中之一上使用 jQuery 轮播，但它不适用于表格。所以我需要将表格转换为列表。这不是问题，因为我发现一些 jQuery 可以为我做到这一点。即:

var list = $("<ul/>");      
$('#tab1').find("tr").each(function() {         
    var p = $(this).children().map(function() {             
        return "<p>" + $(this).html() + "</p>";         
    });          
    list.append("<li>" + $.makeArray(p).join("") + "</li>");     
});      
$('#tab1').replaceWith(list); 

表结构如下:

<table id="test1">
    <tr><td>Help 1</td></tr>
    <tr><td>Me 1</td></tr>
    <tr><td>Please 1</td></tr>
    <tr><td>Help 2</td></tr>
    <tr><td>Me 2</td></tr>
    <tr><td>Please 2</td></tr>
    <tr><td>Help 3</td></tr>
    <tr><td>Me 3</td></tr>
    <tr><td>Please 3</td></tr>
</table>

上面的 jQuery 将每个 tr 转换为 li 项。但根据我的需要，我需要分成 3 行。所以输出应该是:

<ul id="test1">
    <li>
        <p class="p1">Help 1</p>
        <p class="p2">Me 1</p>
        <p class="p3">Please 1</p>
    </li>
    <li>
        <p class="p1">Help 2</p>
        <p class="p2">Me 2</p>
        <p class="p3">Please 2</p>
    </li>
    <li>
        <p class="p1">Help 3</p>
        <p class="p2">Me 3</p>
        <p class="p3">Please 3</p>
    </li>
</ul>

所以我需要向每一行添加一个类并将它们分成三组。所以我需要知道，使用上面的 jQuery 语句，是否可以使用计数器来迭代 children().map 函数中的列表？

Answer 1

尝试这个更明确的版本( fiddle ):

var list = $("<ul/>");      
var listitem = null;

// iterate over each cell (not each row)
$('#tab1').find("tr > td").each(function(i) {

    // starting with the first item, start a new listitem every three items
    // and append it to the ul
    if(i%3 == 0){
        listitem = $("<li/>");
        list.append(listitem);
    }

    // append the current item as a paragraph to the listitem
    var p = "<p>" + $(this).html() + "</p>";         
    listitem.append(p);

});      

// replace the table with the ul
$('#tab1').replaceWith(list);