jQueryで複数の繰り返し要素を折り返すwrapAll（）

Question

こんにちは、私はこれを年齢のための解決策にしてきました。基本的には、次のような繰り返し構造を持っています：div内の.articleの最後の3つの子要素をラップする必要があります。

<div class="article"> 
    <div> 
    </div> 
    <div class="wrapper"> 
     <h2> 
     </h2> 
     <div> 
     </div> 
     <div> 
     </div> 
    </div> 
</div> 

私はjQueryの.before（）と.after（）が、私はそれらの両方を呼び出すことができます前に近い要素を試してみました。これは私の土壇場の努力だった：

(function($) { 
    $(document).ready(function() { 
     var items = $(".article > *"); 
     for(var i = 1; i < items.length; i+=3) { 
      items.slice(i, i+3).wrapAll("<div class='wrapper'></div>"); 
     }; 
    }); 
})(jQuery); 

これが最初.articleのために正常に動作しますが、コードの残りの部分を台無しに。

ここで実際の生活の例：要素の上に

http://www.blanketmedia.com.au/Cruise/hotnews.jsp

Answer 1

ループ、子供を選択し、最初のを削除し、それらを包みます。

$(".article").each(function() { 
 
    $(this).children().slice(1).wrapAll('<div class="wrapper"></div>'); 
 
});

.article { background: yellow; } 
 
.wrapper { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div>1 
 
    </div> 
 
    <h2>2 
 
    </h2> 
 
    <div>3 
 
    </div> 
 
    <div>4 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div>5 
 
    </div> 
 
    <h2>6 
 
    </h2> 
 
    <div>7 
 
    </div> 
 
    <div>8 
 
    </div> 
 
</div>

Answer 2

このお試しください：ここで

$('.article *:nth-child(3)').wrap("<div class='wrapper'></div>");

Answer 3

を別のソリューションです：

$('.article').each(function(){ 
 
    var articleChildren = $(this).children(); 
 
    var lastThreeElements = articleChildren.slice(Math.max(articleChildren.length - 3, 1)); 
 
    lastThreeElements.wrapAll('<div class="wrapper">'); 
 
});

.article { background: yellow; } 
 
.wrapper { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div>Div 1 
 
    </div> 
 
    <h2>Header 1 
 
    </h2> 
 
    <div>Inner Div 1 
 
    </div> 
 
    <div>Inner Div 2 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div>Div 1 
 
    </div> 
 
    <h2>Header 1 
 
    </h2> 
 
    <div>Inner Div 1 
 
    </div> 
 
    <div>Inner Div 2 
 
    </div> 
 
</div>