jQuery each

Usage
.each(function(index, Element))
Example
$("div").each(function(index, el){
    //your code
});


ExampleBasic each function
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- CSS -->
<style type="text/css">
.original{
	width:50px;
	height:100px;
	margin-right:1px;
	border:1px solid black;
	background-color:#00B3FF;
	float:left;	
}

.new{
	width:50px;
	height:50px;
	text-align:center;
	line-height;50px;
	margin-right:1px;
	border:1px solid black;
	background-color:red;
	color:white;
	float:left;	
}
</style>


<!-- Javascript -->
<script>
$(document).ready(function(){
	$("#btnGo").click(function(){
		$("#root div").each(function(index, element){
			$(this).attr("class", "new");	
			$(this).html(index);
		});
	});			
	
	$("#btnGoslow").click(function(){
		$("#root div").each(function(index, element){
			setTimeout(function(){
				$(element).attr("class", "new")
				          .html(index);			
			},					   
			500 * index);			
		});
	});	
	
});
</script>

<!-- HTML -->
<div id="root">
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
	<div class="original"></div>
</div>
<div style="clear:both">
<input type="button" value="go" id="btnGo"> <input type="button" value="go in slow motion" id="btnGoslow">




ExamplejQuery each with JSON data
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- CSS -->
<style type="text/css">
#result {
	margin-top:30px;
	width:620px;	
}

#result div{
	width:200px;
	height:20px;
	margin-right:1px;
	margin-top:1px;
	text-align:center;
	border:1px solid black;
	background-color:#00B3FF;
	color:white;
	float:left;		
}

#code{
	width:200px;	
}
</style>


<!-- Javascript -->
<script>
var json = [{
    "Manufacturer": "Toyota",
    "Sold": 1200,
    "Month": "2012-11"
}, {
    "Manufacturer": "Ford",
    "Sold": 1100,
    "Month": "2012-11"
}, {
    "Manufacturer": "BMW",
    "Sold": 900,
    "Month": "2012-11"
}, {
    "Manufacturer": "Benz",
    "Sold": 600,
    "Month": "2012-11"
}, {
    "Manufacturer": "GMC",
    "Sold": 500,
    "Month": "2012-11"
}, {
    "Manufacturer": "HUMMER",
    "Sold": 120,
    "Month": "2012-11"
}];	
	
$(document).ready(function(){
	var result = [];	
	
	$("#btnLoop").click(function(){
		$(json).each(function(index, el){
			result.push(
				         "<div>", el.Manufacturer, "</div>",
						 "<div>", el.Sold, "</div>",
						 "<div>", el.Month, "</div>"
					   )			
		});
		
		$("#result").append(result.join(""));
	});
});
</script>

<!-- HTML -->
<div>
Original JSON :
<br>[<br>{
    "Manufacturer": "Toyota",
    "Sold": 1200,
    "Month": "2012-11"
},<br> {
    "Manufacturer": "Ford",
    "Sold": 1100,
    "Month": "2012-11"
},<br> {
    "Manufacturer": "BMW",
    "Sold": 900,
    "Month": "2012-11"
},<br> {
    "Manufacturer": "Benz",
    "Sold": 600,
    "Month": "2012-11"
},<br> {
    "Manufacturer": "GMC",
    "Sold": 500,
    "Month": "2012-11"
}, <br>{
    "Manufacturer": "HUMMER",
    "Sold": 120,
    "Month": "2012-11"
}<br>];	
</div>

<div id="result">
	<div>Manufacturer</div>
	<div>Sold</div>
	<div>Month</div>	
</div>

<div style="clear:both;margin-top:50px;">
	<input type="button" value="Break down JSON data into table" id="btnLoop">
</div>


 
comments powered by Disqus