在jQuery中将div包装在2x2表格中

Question

在jQuery中将div包装在2x2表格中

3

我有四个像下面这样的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在文档准备就绪时

=======

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

// 我尝试了下面的每一个，但四个div，四行包装一个单独的div，我需要知道如何将前两个div包装在一行中，并将每个div放入一个td中，总共是一个表格....

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

- gani

2

为什么你不能在标记本身中完成它，而不是在DOM准备好后再进行操作？ - Mithun Satheesh

这里的四个内容的权重不是固定的，div中的权重也是不可预测的，每个div的高度可能会与下一个div不同，我需要nX2网格布局。 - gani

4个回答

1

尝试

 $("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/>");

- Balachandran

1

"class:"是一个保留字，因此请将其包装成"class":。 - Roko C. Buljan

好主意 - 用TD替换总的div，并分配相同的类属性。 - gani

@RokoC.Buljan，谢谢您注意到保留的类名，我将其更改了。 - Balachandran

$("tr").wrapAll("<table/>") 这种写法不太好。它会遍历整个 DOM 并且不必要地将每一个 <tr> 元素都包裹在一个 <table> 元素中！http://jsfiddle.net/tLgmnrmy/2/ 也许可以尝试使用选择器？... - Roko C. Buljan

1

@RokoC.Buljan，是的，你说得对，但我提供了他所要求的解决方案。现在我已经更改了代码，它只会影响指定的类。 - Balachandran

1

The text is in HTML format and it reads:

jsBin demo

In Chinese, it would be:

{{链接1：jsBin演示}}

Please note that the text inside the double curly brackets "{{ }}" is a placeholder for a hyperlink.

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

解释上面的jQuery：

$(".link").wrapAll("<table/>") 将它们全部包装到一个表格中。
每个依然指向
，所以我们可以使用each并传递索引值。

$(this).wrap("<td/>")将每个DIV都包装在TD元素中，

完成上述操作后，我们的DIV现在位于TD元素内，如果 i%2 是真实的，意味着我们当前正在查看奇数索引元素，因此目标TD的父级和前一个TD元素，将其添加到集合中并将它们都包装成TR。

- Roko C. Buljan

@RokoC.Buljan ..哦天啊..我觉得他更改了需求，在最初的时候他没有这样要求..无论如何很抱歉给你带来错误信息 :) - Balachandran

1

@Bala...不，你需要1）更多的咖啡（就像我一样）或2）更多的睡眠:) ;) 没问题。只是一个注意事项...问题在1小时前被编辑过，所以...在修订版中（http://stackoverflow.com/posts/26051832/revisions）没有HTML代码修改。 :) 祝编码愉快！ - Roko C. Buljan

0

尝试使用这段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/

- Mr7-itsurdeveloper

div的数量可能会因为内部文本很多而有所变化。 - gani

这里的表格必须是动态的，但你却在静态地处理它。 - gani

@ohk Gani。您需要的表格也是动态的。 - Mr7-itsurdeveloper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manwal · Accepted Answer

你可以这样做：演示

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>

在jQuery中将div包装在2x2表格中

由@Ruko改进的演示

{{链接1:演示}}