jquery：包裝n兄弟姐妹，並將它們放在n個元素後面

Question

我正在摧毀自己以獲得在JQuery中處理以下問題的解決方案：在容器內部，我有一堆物品和模式。

取決於屏幕解決方案，我想將行內的模態包裹起來，並將該行放在最後一個相關項目之後。

這是首發名單的樣子：

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

顯示包含3個項目後3個連情態動詞該行的結果應該是這樣的：

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

我也嘗試過在這裏設置一個小提琴：fiddle但是對於它的感覺，我根本沒有得到它的工作。你們會有人幫忙嗎？

非常感謝， 湯姆

Answer 1

在這裏，你去了一個解決方案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>

希望這將幫助你。