1

我有这样的事情：

<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 个 imgs，以获得如下结果：

    <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 个缺点： - 第一：我丢失了我的 wrap div[class="l-logo-window"]， - 第二：前两个 div 缺少一个 div。

请帮帮我，谢谢！

4

2 回答 2

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

小提琴

于 2013-01-29T15:14:48.957 回答
0

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

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]); 
}
于 2013-01-29T15:20:45.857 回答