Question

I’d like to add a simple bit of code to my HTML (the list item) for every 5th loop.

Here is my code:

 if (jsonData != null && jsonData.length > 0){
     for (i=0;i<jsonData.length;i++){
         if( jsonData[i].name.length > 15 ) 
                 cname = jsonData[i].name.substr(0,15);
         else cname = jsonData[i].name ;
         resHTML += '<li><a title="'+ jsonData[i].name +'" href="'+ jsonData[i].link +'"><img width="137" height="175" alt="'+ jsonData[i].name +'" src="'+ jsonData[i].img +'"></a><br><a href="'+ jsonData[i].link +'">'+ cname +'</a></li>' ;

     }
 }

So for every 5th loop, the <li> would become <li style="margin-right:0">

Can anyone show me how to do this?

Thank you

Answer 1

You don’t need to handle this with JavaScript.

Use this simple CSS:

li + li {
    margin-left: 20px;
}

That will apply margin-left to all except the first li, which should be the same as applying margin-right to all but the last li.

+ is the adjacent sibling selector.