How to split list of objects into divs

Question

I have something like this:

<div class="l-logo-window">
<img alt="X" src=".../7e1571ec597e_18dbe64431">
<img alt="X" src=".../073c03a63161_a7b6976ea8">
<img alt="X" src=".../a3d64882c398_0a8a1e5c9a">
...
<img alt="X" src=".../ae6082c9b3b1_fc020700ee">
<img alt="X" src=".../d154cb017e7a_f03972285a">
<img alt="X" src=".../975809963413_6c999604ab">

And Im trying to split them to divs, and in that divs make another 2 divs with 4 imgs each, to get something like this:

    <div class="l-logo-window">
        <!-- 8 Elements in total - wrap -->
        <div>
            <!-- 4 Elements in div -->
                <div>
                        <img alt="X" src=".../7e1571ec597e_18dbe64431">
                        <img alt="X" src=".../073c03a63161_a7b6976ea8">
                        <img alt="X" src=".../a3d64882c398_0a8a1e5c9a">
                        <img alt="X" src=".../3318b65041f2_3447b0bf60">
                </div>
            <!-- 4 Elements in div -->
                <div>
                        <img alt="X" src=".../7e1571ec597e_18dbe64431">
                        <img alt="X" src=".../073c03a63161_a7b6976ea8">
                        <img alt="X" src=".../a3d64882c398_0a8a1e5c9a">
                        <img alt="X" src=".../3318b65041f2_3447b0bf60">
                </div>
        </div>  
        <!-- 8 Elements in total - wrap -->
        <div>
            <!-- 4 Elements in div -->
                <div>
                        <img alt="X" src=".../7e1571ec597e_18dbe64431">
                        <img alt="X" src=".../073c03a63161_a7b6976ea8">
                        <img alt="X" src=".../a3d64882c398_0a8a1e5c9a">
                        <img alt="X" src=".../3318b65041f2_3447b0bf60">
                </div>
            <!-- 4 Elements in div -->
                <div>
                        <img alt="X" src=".../7e1571ec597e_18dbe64431">
                        <img alt="X" src=".../073c03a63161_a7b6976ea8">
                        <img alt="X" src=".../a3d64882c398_0a8a1e5c9a">
                        <img alt="X" src=".../3318b65041f2_3447b0bf60">
                </div>
        </div>  

</div>

I got this:

$('.l-logo-window > img:nth-child(8n-7)').each(function() {
     $(this).nextAll().slice(0, 7).add(this).wrapAll('<div class="subclass-js"></div>');
 }).eq(0).closest('div').unwrap();

 $('.subclass-js > img:nth-child(4n-3)').each(function() {
     $(this).nextAll().slice(0, 3).add(this).wrapAll('<div></div>');
 }).eq(0).closest('div').unwrap();

But it has 2 cons: - first: Im losing my wrap div[class="l-logo-window"], - second: first two divs are missing one div.

Please help me out, thanky!

See this http://stackoverflow.com/questions/1644668/jquery-split-long-ul-list-in-smaller-lists — palaѕн, Jan 29 '13 at 14:26

wirey00 · Accepted Answer · 2013-01-29T15:44:09.430

You can do it like this in two loops

// get every 8th element 
$('.l-logo-window > img:nth-child(8n+8)').each(function(){
   // wrap all prev img + current with div
   $(this).prevAll('img').addBack().wrapAll('<div/>'); 
});

// find ever 4th img inside the child div
$('.l-logo-window > div > img:nth-child(4n+4)').each(function () {
    // wrap all prev img + current with div
    $(this).prevAll('img').addBack().wrapAll('<div/>');
});

http://jsfiddle.net/eReKd/

EDIT:

Only need one loop - everother one wrap the 2 divs with a div

$('.l-logo-window > img:nth-child(4n+4)').each(function (i, v) {
  $(this).prevAll('img').addBack().wrapAll('<div/>');
  if (i % 2 !== 0) { // ever other one wrap another div     
    $('.l-logo-window > div:last').prev().addBack().wrapAll('<div/>');
  }
});

if($('.l-logo-window > div:last > div').length == 0){
    $('.l-logo-window > div:last >  img').wrapAll('<div/>');
    $('.l-logo-window > img').appendTo('.l-logo-window > div:last').wrapAll('<div/>');
}else{
    $('.l-logo-window > img').wrapAll('<div/>').parent().wrap('<div/>');
}

FIDDLE

Thats nice solution, very usefull! But could you help me what should I do with exception, when the last 'pack' is incomplete? check: http://jsfiddle.net/eReKd/1/ — norbert, Jan 29 '13 at 15:21
@ozeczek I noticed there could be errors.. I'm going to update with a better answer — wirey00, Jan 29 '13 at 15:43

score 0 · Answer 2 · answered Jan 29 '13 at 15:20

I didn't have time to test it but should be something like this:

var result = $('img.l-logo-window').each(function() { result.push($(this)) });

$('body').append('<div class="new-l-logo-window"><div class="l-logo-window-eight"><div class="l-logo-window-four"></div></div></div>');

for(var i = 0; i < result.length; i++) {

  if( (i+1) % 8 == 0){
     // 8 Elements in total - wrap
     $('div.new-l-logo-window:last').append('<div class="l-logo-window-eight"><div class="l-logo-window-four"></div></div>');

  }else if( (i+1) % 4 == 0){
     // 4 Elements in div
     $('div.l-logo-window-eight:last').append('<div class="l-logo-window-four"></div>');
  }

  // add new img element
  $('div.l-logo-window-four:last').append(result[i]); 
}

How to split list of objects into divs

2 Answers2