Improved Demo

Question

我有四个div，如下所示。

<div class='link'>...</div>
<div class='link'>...</div>
<div class='link'>...</div>
<div class='link'>...</div>

我想将它们放在2x2表中。

<table>
 <tr>
  <td><div class='link'>...</div> </td>
  <td><div class='link'>...</div> </td>
</tr>
<tr>
 <td><div class='link'>...</div> </td>
 <td><div class='link'>...</div> </td>
</tr>

使用jquery准备好文档

=======

实际上我需要那些DIV的nX2网格布局，所以我使用 jquery.css 让每两个div具有相同的高度。但是在缩放+ - 网格设置受到干扰，所以我认为表格布局会更好，我发现包装解决方案但我不知道如何在nX2表中包装div。

//我在下面尝试了一次，但是四个div，四行包裹一个div，我需要如何在一行中包装前两个div，并且每个div在一个td中，完全是一个表.... / p>

1st trial  $( ".linkbox" ).wrap( "<tr></tr>" );
2nd trial  $( ".linkbox" ).wrap( "<table></table>" );
3rd $( ".linkbox" ).wrap( "<td></td>" );

Answer 1

您可以执行此操作：DEMO

var t = $(document.createElement('table'));
t.appendTo('#target');
var tr;
var counter=1;
$('.link').each(function(){
    console.log(this);
    if(counter%2!=0)
    {
    tr = $(document.createElement('tr'));
    tr.appendTo(t);
    }
    var td = $(document.createElement('td'));
    td.appendTo(tr);
    $(this).appendTo(td);
    counter++;
});

输出：

<table>
    <tbody>
        <tr>
            <td><div class="link">1</div></td>
            <td><div class="link">2</div></td>
        </tr>
        <tr>
            <td><div class="link">3</div></td>
            <td><div class="link">4</div></td>
        </tr>
    </tbody>
</table>

@huko

Improved Demo

Answer 2

试

 $("div.link").replaceWith(function (i, val) {
    return $("<td/>", {
        "class": $(this).attr('class'),
        text: val
    });

});
$("td.link").each(function (i, val1) {
    if (i % 2 == 0) {
        $("td.link:eq(" + i + "),td.link:eq(" + (i + 1) + ")").wrapAll($("<tr/>", {
            'class': 'trNew'
        }));
    }
});

$("tr.trNew").wrapAll("<table/>");

DEMO

Answer 3

<强> jsBin demo

$(".link").wrapAll("<table/>").each(function(i) {
  $(this).wrap("<td/>");
  if(i%2) $(this).parent().prev().andSelf().wrapAll("<tr/>");
});

解释上面的jQuery：

$(".link").wrapAll("<table/>")将它们全部包装在一张桌子里。
每个仍然引用DIV，因此我们可以执行each并传递i索引值
$(this).wrap("<td/>")将每个DIV包裹在TD元素中
完成上述操作后，我们的DIV现在位于TD元素内，如果i%2 truthy 意味着我们当前正在循环中寻找广告ODD索引元素，所以定位TD父级，同时定位前一个TD元素，将 self 添加回集合并将它们都包装到TR。

Answer 4

试试这个jQuery代码：

var table = $('<table></table>').addClass('foo');

for(i=0; i<3; i++){
    var row = $('<tr></tr>').addClass('bar');
     var td1 = $('<td></td>').addClass('bartd');
     var td2 = $('<td></td>').addClass('bartd');    
     row.append(td1);
    row.append(td2);
        var div="<div class='link'> hi div </div>";
    td1.append(div);
    td2.append(div);
    table.append(row);


}

$('html').append(table);

http://jsfiddle.net/rfa7Lh3g/3/

在2x2表jquery中包装div

4 个答案:

Improved Demo

DEMO