は、他のdivをラップするためのdivを挿入

Question

私は、次のコードをお持ちの場合：

$(document).ready(function() { 
    $(function() { 
     var agents = []; 
     $.getJSON('js/agents.json', function(a) { 
      $.each(a.agents, function(b, c) { 
       var content = 
       '<div class="status-card">' + 
       '<div class="agent-details">' + 
       '<span class="agent-name">' + c.name + '</span>' + 
       '<span class="handling-state">' + c.callStatus + '</span>' + 
       '<span class="handling-time">' + c.handlingTime + '</span>' + 
       '</div>' + 
       '<div class="status-indicator"></div>' + 
       '</div>' 
       $(content).appendTo('#left'); 
      }); 
     }); 
    }); 
}); 

をそしてそれがJSONデータからレンダリング言う：私はこのJSを使用したい

<div class="status-card"> 
    <div class="agent-details"> 
     <span class="agent-name">Castro Cook</span> 
     <span class="handling-state">Idle</span> 
     <span class="handling-time">06:32:09</span> 
    </div> 
    <div class="status-indicator"></div> 
</div> 
<div class="status-card"> 
    <div class="agent-details"> 
     <span class="agent-name">Amie Spencer</span> 
     <span class="handling-state">On Call</span> 
     <span class="handling-time">06:00:17</span> 
    </div> 
    <div class="status-indicator"></div> 
</div> 

：のみで時刻とサイクルで1 .status-cardのdivを表示するので、私は、各をラップする必要が

var slideSection = $('div[class^="agent-status-section-"]').hide(), 
i = 0; 
(function cycle() { 
    slideSection.eq(i).fadeIn(900) 
     .delay(2000) 
     .fadeOut(900, cycle); 
    i = ++i % slideSection.length; 
})(); 

へ私は本当に私はすべての10の.status-card divをラップしているはずだ、それをシンプルに保つよ

<div class="agent-status-section-1"> 
    <div class="status-card"> 
     ....... 
    </div> 
</div> 
<div class="agent-status-section-2"> 
    <div class="status-card"> 
     ....... 
    </div> 
</div> 

注：よう。

私は次のものを使用することができましたが、挿入するたびに数字を増やす必要があります（agent-status-section-1, agent-status-section-2）。どうすればいいですか？

var d = $('.status-card'); 
for(var i = 0; i < d.length; i+=5) { 
    d.slice(i, i+5).wrapAll('<div class="agent-status-section-1">'); 
} 

希望がある！おかげ

Answer 1

あなたはシリーズ1、2、3を、取得するために（ループ内でインクリメント後）5によって、あなたのインデックスを分割することができます。..ラッピングするHTML文字列を動的に構築するために使用します。

編集：次のデモでHTMLコードを確認できます。できます！

var cards = $('.status-card'), 
 
    i = 0 
 
while (i < cards.length) { 
 
    cards.slice(i, i += 5).wrapAll('<div class="agent-status-section-' + (i/5) + '">'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Castro Cook</span> 
 
     <span class="handling-state">Idle</span> 
 
     <span class="handling-time">06:32:09</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div> 
 
<div class="status-card"> 
 
    <div class="agent-details"> 
 
     <span class="agent-name">Amie Spencer</span> 
 
     <span class="handling-state">On Call</span> 
 
     <span class="handling-time">06:00:17</span> 
 
    </div> 
 
    <div class="status-indicator"></div> 
 
</div>

Answer 2

ただi変数に文字列で1を置き換える：

var d = $('.status-card'); 
for(var i = 0; i < d.length; i+=5) { 
    d.slice(i, i+5).wrapAll('<div class="agent-status-section-' + i + '">'); 
} 

Answer 3

var d = $('.status-card'); 
j=0; 
for(var i = 0; i < d.length; i+=5) { 
j++; 
    d.slice(i, i+5).wrapAll('<div class="agent-status-section-'+j+'">'); 
} 

P.S.あなたは本当に別のクラスが必要ですか？