插入div以使用JavaScript生成的HTML包装其他div

Question

If I have the following code:

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

And say that rendered from the JSON data:

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

I want to use this 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;
})();

To only show 1 .status-card div at a time and cycle through, so I need to wrap each .status-card like:

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

Note that I'm just keeping it simple, really I'd be wrapping every 10 .status-card divs.

I found the following that I could use, but I'd also need to increment the number at the end ( agent-status-section-1, agent-status-section-2 ) each time it's inserted, how would I do that?

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

Hope that makes sense! Thanks

Answer 1

You can divide your index by five (after incrementing within the loop) to get the series 1, 2, 3, ... and use it to dynamically construct your wrapping HTML string.

Edit: You can inspect the HTML code now in the following demo; it works!

 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

Just replace the 1 in the string with the i variable:

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 Do you really need different class?