Edit in JSFiddle

<div class="page">
    
    <ul class="displayUl">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        
        <li>Thirteen</li>
        <li>Fourteen</li>
        <li>Fifteen</li>
        <li>Sixteen</li>
        <li>Seventeen</li>
        <li>Eighteen</li>
        
        <li>Nineteen</li>    
    </ul>

</div>

function applycss(){
    var liCounts = $("ul.displayUl li").length; 
    var ref= $("ul.displayUl").children("li"); // cache refernce for optimization
    var i=4;
    while(i <= liCounts)
    {
        ref.eq(i).addClass("displayNoMargin");
        i=i+4;
    }
    return true;
}
// When document is ready, initialize function
$(document).ready(function(){      
    applycss();
});

.page{
    margin: 0 auto;
    /* width: 878px; */
    background: #fff;
    border-bottom: 1px solid #ecebec;
    border-left: 1px solid #ecebec;
    border-right: 1px solid #ecebec;    
}
.displayUl{
    padding: 4px 0 0px 0;    
    overflow: hidden;
    list-style-type: none;
}
.displayUl li{
    margin: 0 0 10px 22px;
    padding: 1px;
    float: left;
    width: 116px;
    border: 1px solid #333;    
}
.displayUl li:first-child, .displayUl .displayNoMargin{
    margin: 0 0 10px 0px;
    color: #5181ee;
}
.displayUl .displayNoMargin:before, .displayUl .displayNoMargin:after{
    content: " ";
    display: table;
}
.displayUl .displayNoMargin:after{
    clear: both;    
}