Question

设计糟糕的table就像这样：

<table id="bow-me">
    <td class="show-me">Pet is Great</td>
    <td class="show-me">Pete is Greate</td>

    <td class="go-me">Met is Great</td>
    <td class="go-me">Mete is Greate</td>

    <td class="show-me">Latte is Great</td>
    <td class="show-me">Lattus is Greate</td>

    <td class="low-me">Bet is Great</td>
    <td class="low-me">Bette is Greate</td>

    <td class="go-me">Rat is Great</td>
    <td class="go-me">Rate is Greate</td>
</table>

我需要使用jQuery在每2个<tr>标记后添加<td>标记。为了清楚说明，我在上面的问题中已经分开了两个<td>。

起初我做了：

$('.show-me').wrapAll('<tr class="know-me"> </tr>');
$('.go-me').wrapAll('<tr class="know-me"> </tr>');
$('.low-me').wrapAll('<tr class="know-me"> </tr>');

但是会弄乱结构。

然后我尝试了wrap('<tr></tr>')，其中每个td都包含tr。

我也尝试使用before()和after()方法，但也没有成功。

我理想的输出应该是：

<table id="bow-me">
    <tr class="know-me">
        <td class="show-me">Pet is Great</td>
        <td class="show-me">Pete is Greate</td>
    </tr>
    <tr class="know-me">
        <td class="go-me">Met is Great</td>
        <td class="go-me">Mete is Greate</td>
    </tr>    
    <tr class="know-me">
        <td class="show-me">Latte is Great</td>
        <td class="show-me">Lattus is Greate</td>
    </tr> 
    <tr class="know-me">
        <td class="low-me">Bet is Great</td>
        <td class="low-me">Bette is Greate</td>
    </tr>
    <tr class="know-me">
        <td class="go-me">Rat is Great</td>
        <td class="go-me">Rate is Greate</td>
    </tr>
</table>

无论如何我可以用jQuery做到这一点吗？

The JSFiddle

Answer 1

你可以这样做：

var tds = $('#bow-me td');
for (var i = 0; i < tds.length; i += 2) {
    tds.slice(i, i + 2).wrapAll('<tr class="know-me"></tr>');
}

<强> Updated Fiddle

在@Blazemonger建议中，您可以使用 unwrap() 删除自动生成的tr：

$('.know-me').unwrap();

<强> Updated Fiddle

Answer 2

HTML（原始源代码）与DOM（浏览器和jQuery理解的页面）不同。当您的浏览器读取原始HTML时，它认为它无效并自动在所有表格单元格周围添加<tr>标记。

您应该更改原始HTML，或者根据需要使用div元素和CSS添加display: table-cell。 HTML：

<div id="bow-me">
    <div class="show-me">Pet is Great</div>
    <div class="show-me">Pete is Greate</div>

    <div class="go-me">Met is Great</div>
    <div class="go-me">Mete is Greate</div>

    <div class="show-me">Latte is Great</div>
    <div class="show-me">Lattus is Greate</div>

    <div class="low-me">Bet is Great</div>
    <div class="low-me">Bette is Greate</div>

    <div class="go-me">Rat is Great</div>
    <div class="go-me">Rate is Greate</div>
</div>

CSS：

#bow-me {
    display: table;
}
.know-me {
    display: table-row;
}
.show-me, .go-me, .low-me {
    display: table-cell;
}

现在这个稍微不正统的jQuery会做你想做的事情：

$('.show-me,.go-me,.low-me').each(function() {
    var klass = $(this).attr('class');
    if (!$(this).closest('.know-me').length) { // not already wrapped in a row
        $(this).nextUntil(':not(".'+klass+'")').addBack()
               .wrapAll('<div class="know-me">');
    };
});

http://jsfiddle.net/mblase75/QhKP7/

Answer 3

我认为你不能包装2个dom节点......

我怀疑你必须做类似的事情：

$('#bow-me').find('td:nth-child(2n+1),td:nth-child(2n+2)').wrapAll('<tr class="know-me"></tr>');

希望有人能够改进并找到更好的方法，但就目前而言，我得到了所有这些

Answer 4

您可以使用以下代码;

var length = $("#bow-me td").length;

for (var i = 0; i <= length; i += 2) {
    $("#bow-me td:eq(" + i + "), #bow-me td:eq(" + (i+1) + ")").wrapAll('<tr class="know-me"></tr>');
}

这是一个工作小提琴： http://jsfiddle.net/cubuzoa/WNQ3d/4/

Answer 5

你可以这样做：

var els = $('td'),
    trow;
for (var i = 0; i < els.length; i++) { 
    if (i%2 === 0) {
        trow = $('<tr class="know-me" />');
        $(els[i]).before(trow);
        trow.append(els[i]);
        trow.append(els[i + 1]);
    }
}

请参阅小提琴以供参考：http://jsfiddle.net/harveyramer/wjrmp/

如何在jQuery中仅包装选定的元素

5 个答案: