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

Answer 2

试试这个：

var target = $("#test1");
var results = [];
target.find("tr > td").each(function(i) {
    var obj = $(this);
    if(i%3 == 0) results.push("<li>");
    results.push("<p>");
    results.push(obj.html());
    results.push("</p>");
    if(i%3 == 2) results.push("</li>");
});
var results_in_html = results.join("");

看起来很乱，但我想这是运行时优化，请参阅： http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

Answer 3

您可以使用.slice()对<tr/>

进行分组

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

while($("#test1 tr").length > 0)
{
    var td = $("#test1 tr").slice(0, 3).detach().find("td");
    var nowP = td.map(function(index, elm){
        return $("<p/>", {html:$(elm).text(), class:"p" + (index+1)}).get();
    });
    list.append($("<li/>").append(nowP));
}

$("#test1").replaceWith(list);

<强> Example on jsfiddle

将表转换为列表分组3行

3 个答案: