Wrapping mehrere wiederkehrende Elemente mit jQuery wrapAll()

Question

Hallo Ich habe für eine Lösung für diese seit Ewigkeiten gesucht. Grundsätzlich habe ich eine sich wiederholende Struktur wie folgt:

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

Ich muss die letzten drei untergeordneten Elemente von .article in einem div z.

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

Ich habe jQuery .before versucht() und .after(), aber die Elemente schließen, bevor ich sie beide anrufen können. Dies war mein letztes Aufbäumen:

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

Dies funktioniert gut für die erste .Artikel aber ruiniert den Rest des Codes.

Real life Beispiel hier:

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

Answer 1

Schleife über die Elemente, wählen Sie die Kinder, entfernen Sie das erste, und sie wickeln.

$(".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

Try this:

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

Answer 3

Hier ist eine andere Lösung:

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