Clever Geek Handbook

Wrap divs in 2x2 jquery table

I have four divs as shown below.

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

I want to place them in a 2x2 table.

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

with jquery on finished document

=======

I actually need an nX2 grid layout for these DIVs, so I made each of the two divs the same height using jquery.css. But when scaling + - this grid setting is broken, so I thought the table layout would be better, I found a wrap solution, but I don't know how to wrap a div in an nX2 table.

// I tried under each one at once, but four divs, four lines wrapping one div, I need how to wrap the first two divs in one line, and each div in one td, completely a table ....

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


source to share


4 answers


What can you do: 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++;
});

Output:



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

Improved demo by @Ruko

+2


source


try

 $("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

+1


source


jsBin demo

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

To explain jQuery above:

  • $(".link").wrapAll("<table/>")

    wrap them all in a table.
  • Each one is still related to DIV

    , so we can do each

    and pass the index valuei

  • $(this).wrap("<td/>")

    wrap each DIV inside a TD element,
  • After this has been done, our DIV is now inside a TD element, and if i%2

    true, then we are currently inside a loop looking for a declaration with an ODD index element, so targeting the TD parent, targeting the previous TD element also adds to the collection back to self and wraps them as in TR

    .
+1


source


Try this jQuery code:

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/

0


source






More articles:


All Articles