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

您可以将索引除以5（在循环内递增后）以获得系列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+'">');
}

P.S。你真的需要不同的课程吗？

插入div以使用JavaScript生成的HTML

3 个答案: