change after 4

Change every four element after 4 element

by Zuhaib Siddiqui

HTML

<ul class="foo">
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
	<li><span>text here</span></li>
</ul>

<body>

<button>Alert the value of each list item</button>

<ul class="foo2">
  <li>Coffee</li>
  <li>Milk</li>
  <li>Soda</li>
</ul>

CSS

ul{
	list-style:none;
}
ul > li{
	display:block;
	padding:3px;
}
ul > li > span{
	display:block;
	background-color:#f00;
	padding:10px;
	text-align:center;
}

JavaScript

$('.foo').each(function(i,val){
	var ele = $(this).find('span');
	for(var i; i <= 4, ++i){
		ele.css({'backgroundColor':'#00f'});
	}
});


$(document).ready(function(){
    $("button").click(function(){
        $('.foo2 > li').each(function(){
            alert($(this).text())
        });
    });
});

//http://stackoverflow.com/questions/21482521/javascript-for-loop-how-to-count-every-four-items