более короткий способ использовать счетчик для класса div в jquery

Question

я пытаюсь установить 1-е деление в списке на box2, 2-е и 3-е на box, и 4-е на box3 затем повторите поля с 1 по 4.

любопытно, если бы более короткий способ сделать это со счетчиком.

jQuery(document).ready(function($) {
var repos = $('#repositories');
var username = 'username';
var count = 0;
$.getJSON('http://github.com/api/v2/json/repos/show/' + username + '?callback=?',      function(data, status) {
    $.each(data.repositories.reverse(), function() {
        if (this.name != username + '.github.com') {
            count++;
            if (count == 1) {
                var boxes = 'box2';
            } else if (count == 4) {
                var boxes = 'box3';
                count = 0;
            } else {
                var boxes = 'box';
            }
            line = $('<div class="' + boxes + '"> <h3>' + this.name + '</h3> <p>' + this.description + '</p> <p><a href="' + this.url + '">more...</a></p> </div>').hide();
            $(repos).append(line);
            $(line).fadeIn(500);
        }
      });
  });

Answer 1

Похоже, вы удаляете единицу из фактического значения переменной count, если оно не равно нулю? Если это так, то вы можете сделать это:

var boxes = (count === 0) ? 'box' : 'box' + (count - 1);

Чтобы повторять каждые четыре, просто сбросьте переменную count, если она больше четырех:

count++;
if (count > 4) {
    count = 1;
}

Вот отредактированная версия вашего кода:

jQuery(document).ready(function($) {
    var $repos    = $('#repositories'),
        username  = 'username',
        count     = 0;
    $.getJSON('http://github.com/api/v2/json/repos/show/' + username + '?callback=?',      function(data, status) {
        var output = [];
        data.repositories = data.repositories.reverse();
        for (var i = 0, len = data.repositories.length; i < len; i++) {
            if (data.repositories[i].name != username + '.github.com') {
                count++;
                if (count > 4) {
                    count = 1;
                }
                var boxes = (count === 0) ? 'box' : 'box' + (count - 1);
                output[output.length] = '<div class="' + boxes + '"> <h3>' + data.repositories[i].name + '</h3> <p>' + data.repositories[i].description + '</p> <p><a href="' + data.repositories[i].url + '">more...</a></p> </div>';
            }
        }
        var $line = output.join('').hide();
        $repos.append($line);
        $line.fadeIn(500);
    });
});

Answer 2

То, что вы можете искать, это по модулю.

count = ( count + 1 ) % 5;

Теперь вместо бесконечного роста счет будет иметь последовательность 0, 1, 2, 3, 4, 0, 1, 2, 3, 4 и т. Д.

Ваш класс ящиков выглядит немного странным, с count = 0, 'count = 2' и count = 3 все в результате "box".Предполагая, что это не ошибка, я, вероятно, записал бы это как:

classes = ['box', 'box2', 'box', 'box', 'box3'];
boxes = classes[count];

Этот способ немного более читабелен для меня и упрощает настройку логики по мере необходимости.

Answer 3

Вы можете использовать такие строки:

var boxes = (count == 1) ? 'box2' : (count == 4) ? 'box3' : 'box';
count = (count == 4) ? 0 : count + 1;