I was wondering how to count items in for loop in javascript,

For example I have array with 12 values/objects and I wanna append them to list in html but I wanna put befeore every first an <hr> tag and before every fourth <br>.

now I'm using:

var buttons = [ {"tag":"adr","color":"#123456"},
           {"tag":"ag","color":"#123456"},
           {"tag":"fax","color":"#123456"},
           {"tag":"ind","color":"#123456"},
           {"tag":"sname","color":"#123456"},
           {"tag":"per","color":"#123456"},
           {"tag":"tel","color":"#123456"},
           {"tag":"url","color":"#123456"},
           {"tag":"url","color":"#123456"},
           {"tag":"weblink","color":"#123456"},
           {"tag":"weblink","color":"#123456"},
           {"tag":"close","color":"#123456"} ];

for (var i = 0; i < buttons.length; i++){
    var tag = buttons[i].tag;
    var color = buttons[i].color;

    $(".list").append("<li>"+ tag + ", " + color +"</li>");
}

and it just appends items from object to list.

It's maybe hard to describe what is my intention so maybe the best way is to put jsfiddle link where the left list is my current situation and the right on is what I wanna to look it like: /

I have not found any similar specific example so far, what is the best way to do that? I need somehow use iterator, check him in loop or something

I was wondering how to count items in for loop in javascript,

For example I have array with 12 values/objects and I wanna append them to list in html but I wanna put befeore every first an <hr> tag and before every fourth <br>.

now I'm using:

var buttons = [ {"tag":"adr","color":"#123456"},
           {"tag":"ag","color":"#123456"},
           {"tag":"fax","color":"#123456"},
           {"tag":"ind","color":"#123456"},
           {"tag":"sname","color":"#123456"},
           {"tag":"per","color":"#123456"},
           {"tag":"tel","color":"#123456"},
           {"tag":"url","color":"#123456"},
           {"tag":"url","color":"#123456"},
           {"tag":"weblink","color":"#123456"},
           {"tag":"weblink","color":"#123456"},
           {"tag":"close","color":"#123456"} ];

for (var i = 0; i < buttons.length; i++){
    var tag = buttons[i].tag;
    var color = buttons[i].color;

    $(".list").append("<li>"+ tag + ", " + color +"</li>");
}

and it just appends items from object to list.

It's maybe hard to describe what is my intention so maybe the best way is to put jsfiddle link where the left list is my current situation and the right on is what I wanna to look it like: http://jsfiddle/E6qR7/

I have not found any similar specific example so far, what is the best way to do that? I need somehow use iterator, check him in loop or something

• javascript
• jquery
• html
• css

• 1 Couple of things; what do you mean by before every first? Secondly, you can't have hr or br tags as a direct child of a ul, so they would need to be placed within their own li. – Rory McCrossan Commented Jan 31, 2014 at 14:35
• I have updated my answer to use styling instead, which I think is more appropriate as the alternatives all generate invalid HTML (which only works because of browsers being very fault tolerant). It also gives you much finer control of the output. – iCollect.it Ltd Commented Jan 31, 2014 at 17:02

6 Answers 6

You can try this

if (i && (i % 4 === 0)) {
    $('.list').append('<hr>');
}

DEMO

Lots of the other answers are correct, but the minimum expression needed is:

    if (i && !(i % 4))
    {
        $('.list').append('<hr>');
    }

I noticed all the other answers (including mine above) do not generate valid HTML, so I would suggest using styling instead and annotate classes onto the LIs:

JSFIDDLE: http://jsfiddle/TrueBlueAussie/E6qR7/5/

var buttons = [ {"tag":"adr","color":"#123456"},
               {"tag":"ag","color":"#123456"},
               {"tag":"fax","color":"#123456"},
               {"tag":"ind","color":"#123456"},
               {"tag":"sname","color":"#123456"},
               {"tag":"per","color":"#123456"},
               {"tag":"tel","color":"#123456"},
               {"tag":"url","color":"#123456"},
               {"tag":"url","color":"#123456"},
               {"tag":"weblink","color":"#123456"},
               {"tag":"weblink","color":"#123456"},
               {"tag":"close","color":"#123456"} ];

    for (var i = 0; i < buttons.length; i++){
        var tag = buttons[i].tag;
        var color = buttons[i].color;
        var $li = $("<li></li>");
        if (!(i % 4)) {
            $li.addClass('line');
            if (i){
                $li.addClass('break');
            }
        }
        $li.append(tag + ", " + color);
        $(".list").append($li);
    }

This also shows a different way of creating elements and filling them (just for clarity)

http://jsfiddle/E6qR7/3/

    if(i % 4 == 0) {
        $(".list").append("<hr />");
    }

Using javascript modulus:

for (var i = 0; i < buttons.length; i++){
    var tag = buttons[i].tag;
    var color = buttons[i].color;

    if (i % 4 == 0)
        $(".list").append("<hr>");
    $(".list").append("<li>"+ tag + ", " + color +"</li>");
}

I figured you could modify it yourself to include the <br> tag ;)

Something like this would work:

    for (var i = 0; i < buttons.length; i++){
        var tag = buttons[i].tag;
        var color = buttons[i].color;
        if ( i == 0 ) {
            $(".list").append("<hr />");                    
        }
        else if ( i % 4 == 0 ) {
            $(".list").append("<br /><hr />");        
        }
        $(".list").append("<li>"+ tag + ", " + color +"</li>");
    }

http://jsfiddle/E6qR7/4/

you should use modulo (%).

if (i%4==0) $(".list").append("<hr>");
if (i%4==3) $(".list").append("<br>");