如何将对象列表拆分为div

Question

我有这样的事情：

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

我试图将它们分成div，并且在div中创建另外2个div，每个4个img，得到这样的东西：

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

我明白了：

$('.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();

但它有2个缺点： - 第一：我失去了我的包裹div [class =“l-logo-window”]， - 第二：前两个div缺少一个div。

请帮帮我，谢谢！

Answer 1

你可以在两个循环中这样做

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

修改

只需要一个循环 - 永远用div包装2个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

Answer 2

我没时间测试它，但应该是这样的：

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]); 
}