Jquery 如何将对象列表拆分为div

我有这样的想法：

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

...

我试着把它们分成几个部分，在这个部分中，再做两个部分，每个部分有4个IMG，得到如下结果：

<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 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();

$（'.l-logo-window>img:n子项（8n-7）'）。每个（函数（）{
$（this.nextAll（）.slice（0,7）.add（this.wrapAll）（“”）；
}).eq（0）.最近（'div'）。展开（）；
$（'.subclass js>img:n子类（4n-3）'）。每个（函数（）{
$（this.nextAll（）.slice（0,3）.add（this.wrapAll）（“”）；
}).eq（0）.最近（'div'）。展开（）；

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

---

请帮帮我，谢谢

这样做可以分两个循环进行

// 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/>');
});

//每8个元素获取一次
$（'.l-logo-window>img:n第n个子项（8n+8'）。每个（函数（）{
//用div将所有上一个img+电流包裹起来
$（this.prevAll（'img'）.addBack（）.wrapAll（''）；
});
//在child div中查找第四个img
$（'.l-logo-window>div>img:n个子项（4n+4'）。每个（函数（）{
//用div将所有上一个img+电流包裹起来
$（this.prevAll（'img'）.addBack（）.wrapAll（''）；
});

编辑：

只需要一个循环-每个循环用一个div包装两个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/>');
}

$（'.l-logo-window>img:n子项（4n+4）”。每个（函数（i，v）{
$（this.prevAll（'img'）.addBack（）.wrapAll（''）；
如果（i%2！==0）{//任何其他的一个封装另一个div
$（'.l-logo-window>div:last'）.prev（）.addBack（）.wrapAll（''）；
}
});
如果（$（'.l-logo-window>div:last>div'）。长度==0）{
$（'.l-logo-window>div:last>img'）.wrapAll（''）；
$（'.l-logo-window>img'）。附录（'.l-logo-window>div:last'）。wrapAll（''）；
}否则{
$（'.l-logo-window>img'）.wrapAll（'.parent（）.wrap（''）；
}

---

您可以在两个循环中完成此操作

// 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/>');
});

//每8个元素获取一次
$（'.l-logo-window>img:n第n个子项（8n+8'）。每个（函数（）{
//用div将所有上一个img+电流包裹起来
$（this.prevAll（'img'）.addBack（）.wrapAll（''）；
});
//在child div中查找第四个img
$（'.l-logo-window>div>img:n个子项（4n+4'）。每个（函数（）{
//用div将所有上一个img+电流包裹起来
$（this.prevAll（'img'）.addBack（）.wrapAll（''）；
});

编辑：

只需要一个循环-每个循环用一个div包装两个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/>');
}

$（'.l-logo-window>img:n子项（4n+4）”。每个（函数（i，v）{
$（this.prevAll（'img'）.addBack（）.wrapAll（''）；
如果（i%2！==0）{//任何其他的一个封装另一个div
$（'.l-logo-window>div:last'）.prev（）.addBack（）.wrapAll（''）；
}
});
如果（$（'.l-logo-window>div:last>div'）。长度==0）{
$（'.l-logo-window>div:last>img'）.wrapAll（''）；
$（'.l-logo-window>img'）。附录（'.l-logo-window>div:last'）。wrapAll（''）；
}否则{
$（'.l-logo-window>img'）.wrapAll（'.parent（）.wrap（''）；
}

---

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

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

var result=$（'img.l-logo-window'）。每个（函数（）{result.push（$（this））}）；
$（'body'）。追加（''）；
对于（变量i=0；i

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

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

var result=$（'img.l-logo-window'）。每个（函数（）{result.push（$（this））}）；
$（'body'）。追加（''）；
对于（变量i=0；i

看看这个，看看这个，这是个不错的解决方案，非常有用！但是，你能帮我做些什么吗？当最后一个“包装”不完整时，我该怎么办？检查：@ozeczek我注意到可能有错误。。我将更新一个更好的答案这是一个很好的解决方案，非常有用！但是，你能帮我做些什么吗？当最后一个“包装”不完整时，我该怎么办？检查：@ozeczek我注意到可能有错误。。我会更新一个更好的答案