jquery: envelopper n frères et les positionner derrière n éléments

Question

Je me détruis pour obtenir une solution de travail dans JQuery pour le problème suivant: Dans un conteneur, j'ai un tas d'éléments et de modaux.

En fonction de la solution d'écran, je souhaite envelopper les modales à l'intérieur d'une ligne et positionner cette ligne juste après le dernier élément associé.

C'est ce que la liste de départ ressemble à:

<div class="overview"> 
    <div class="item n0">Item</div> 
    <div class="item n1">Item</div> 
    <div class="item n2">Item</div> 
    <div class="item n3">Item</div> 
    <div class="item n4">Item</div> 
    <div class="item n5">Item</div> 
    <div class="item n6">Item</div> 
    <div class="item n7">Item</div> 
    <div class="item n8">Item</div> 
    <div class="item n9">Item</div> 
    <div class="modal n0">Modal</div> 
    <div class="modal n1">Modal</div> 
    <div class="modal n2">Modal</div> 
    <div class="modal n3">Modal</div> 
    <div class="modal n4">Modal</div> 
    <div class="modal n5">Modal</div> 
    <div class="modal n6">Modal</div> 
    <div class="modal n7">Modal</div> 
    <div class="modal n8">Modal</div> 
    <div class="modal n9">Modal</div> 
</div> 

Pour afficher la ligne contenant les 3 connectés modaux après les 3 éléments du résultat devrait ressembler à ceci:

<div class="overview"> 
    <div class="item n0">Item</div> 
    <div class="item n1">Item</div> 
    <div class="item n2">Item</div> 
     <div class="row"> 
      <div class="modal n0">Modal</div> 
      <div class="modal n1">Modal</div> 
      <div class="modal n2">Modal</div> 
     </div> 
    <div class="item n3">Item</div> 
    <div class="item n4">Item</div> 
    <div class="item n5">Item</div> 
     <div class="row"> 
      <div class="modal n3">Modal</div> 
      <div class="modal n4">Modal</div> 
      <div class="modal n5">Modal</div> 
     </div> 
    <div class="item n6">Item</div> 
    <div class="item n7">Item</div> 
    <div class="item n8">Item</div> 
     <div class="row"> 
      <div class="modal n6">Modal</div> 
      <div class="modal n7">Modal</div> 
      <div class="modal n8">Modal</div> 
     </div> 
    <div class="item n9">Item</div> 
    <div class="row"> 
     <div class="modal n9">Modal</div> 
    </div> 
</div> 

J'ai aussi essayé pour installer un violon ici: fiddle mais pour le coup, je ne comprends pas du tout. Est-ce que l'un d'entre vous pourrait aider?

Merci beaucoup, Tom

Answer 1

Ici vous allez avec une solution https://jsfiddle.net/3p3415qo/29/

var modals = $('.overview > .modal'); 
 

 
for(var i = 0; i < modals.length; i+=3) { 
 
    $('.overview > div[class="item n' + (i+2) + '"]').after("<div class='row row" + i + "'></div>") 
 
    $('.row' + i).html($('div[class="modal n' + i +'"], div[class="modal n' + (i+1) +'"], div[class="modal n' + (i+2) +'"]').clone()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overview"> 
 
    <div class="item n0">Item</div> 
 
    <div class="item n1">Item</div> 
 
    <div class="item n2">Item</div> 
 
    <div class="item n3">Item</div> 
 
    <div class="item n4">Item</div> 
 
    <div class="item n5">Item</div> 
 
    <div class="item n6">Item</div> 
 
    <div class="item n7">Item</div> 
 
    <div class="item n8">Item</div> 
 
    <div class="item n9">Item</div> 
 
    <div class="modal n0">Modal</div> 
 
    <div class="modal n1">Modal</div> 
 
    <div class="modal n2">Modal</div> 
 
    <div class="modal n3">Modal</div> 
 
    <div class="modal n4">Modal</div> 
 
    <div class="modal n5">Modal</div> 
 
    <div class="modal n6">Modal</div> 
 
    <div class="modal n7">Modal</div> 
 
    <div class="modal n8">Modal</div> 
 
    <div class="modal n9">Modal</div> 
 
</div>

Hope this vous aider.