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

そして、Imはそれらをdivに分割しようとしています。その中で、divはそれぞれ4つのimgを持つ別の2つのdivを作成し、次のようなものを取得します。

    <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"]を失いました。-2番目：最初の2つのdivに1つのdivがありません。

助けてください、ありがとう！

4

2 に答える 2

1

あなたは2つのループでこのようにそれを行うことができます

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

編集：

必要なループは1つだけです。他の1つは、2つの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/>');
}

フィドル

于 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 に答える