<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fruit Basket</title>
<link rel="stylesheet" href="css/fruitBasket.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
// Array containing Objects with Fruit names & quantities
var fruitBasket = [ {title:'Apples', quantity:20},
{title:'Oranges', quantity:25},
{title:'Kiwis', quantity:50},
{title:'Strawberries', quantity:45},
{title:'Bananas', quantity:10},
{title:'Mangoes', quantity:5},
{title:'Tomatoes', quantity:30} ];
// Your jQuery code goes here
$.each( fruitBasket, function( index, element){
$('.fruits').append('<li>We have ' + element.quantity + " " + element.title + '</li>');
});
$('.fruits > li').each( function(index, element){
$(element).css('background-color','rgb(100,200,0)');
});
})
</script>
</head>
<body>
<div class="container">
<ul class="fruits">
</ul>
</div>
</body>
</html>
otro ejemplo
<html>
<head>
<title>Funcion each()</title>
<script type = "text/javascript" src = "jquery.js"> </script>
<script type = "text/javascript">
$(document).ready(function()
{
$.each(["Lun","Mar","Mie","Jue","Vie"],function(idx,v) {
console.log('(' + idx + ') Tratando valor (' + v +')');
});
});
</script>
</head>
<body>
</body>
</html>
otro ejemplo
<html>
<head>
<title>Funcion each(II)</title>
<script type = "text/javascript" src = "jquery.js"> </script>
<script type = "text/javascript">
$(document).ready(function()
{
$("p").each(function(idx,v) {
console.log('(' + idx + ') Tratando valor (' + $(this).html() +')');
});
});
</script>
</head>
<body>
<p>Parrafo 1</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
</body>
</html>
No hay comentarios:
Publicar un comentario