插入div以使用JavaScript生成的HTML包裝其他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數據呈現：

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

我想使用這個JS：

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

要一次只顯示1個.status-card div並循環顯示，因此我需要像這樣包裝每個.status-card ：

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

請注意，我只是保持簡單，實際上我將每10個.status-card 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，...，並使用它動態構造包裝的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

只需將字符串中的1替換為i變量：

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+'">');
}

PS，您真的需要其他課程嗎？