CODEWITHSUNDEEP
javascriptjqueryclasscountergithub-api
chris mccoy
chris mccoy

Reputation: 347

shorter way to use a counter for a div class in jquery

im trying to set the 1st div in the list to box2, 2nd and 3rd, to box, and 4th to box3 then repeat boxes 1 through 4.

curious if a shorter way to do it with the counter.

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

Upvotes: 0

Views: 380

Answers (3)

Chris Subagio
Chris Subagio

Reputation: 6339

What you may be looking for is a modulo.

count = ( count + 1 ) % 5;

Now instead of growing indefinitely, count will be the sequence 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, etc

Your boxes class seems to be a little odd, with count = 0, 'count = 2' and count = 3 all resulting "box". Assuming that's not an error, I'd probably write that as:

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

That way is a little more readable to me, and makes it simple to rejig the logic as necessary.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

It seems like you are removing one from the actual value of the count variable unless it is equal to zero? If this is the case then you could do this:

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

To repeat every four, just reset the count variable if it is above four:

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

Here is an edited version of your code:

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

Upvotes: 1

John Fisher
John Fisher

Reputation: 22717

You could use lines like this:

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

Upvotes: 1

Related Questions