Если у меня есть следующий код:

$(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 делений.

Я нашел следующее, что мог бы использовать, но мне также нужно увеличивать число в конце (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">');
}

Надеюсь, что это имеет смысл! Благодарность

0
Wayne 13 Дек 2016 в 02:58

3 ответа

Лучший ответ

Вы можете разделить ваш индекс на пять (после увеличения в цикле), чтобы получить ряды 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>
2
gyre 13 Дек 2016 в 00:16
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+'">');
}

Постскриптум Вам действительно нужен другой класс?

1
sinisake 13 Дек 2016 в 00:09

Просто замените 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 + '">');
}
1
Michał Perłakowski 13 Дек 2016 в 00:05