Browser console output

http://www.jquery4u.com/jquery-functions/jquery-each-examples/

by Durtto

HTML

<div class="colors">Red</div>
<div class="colors">Orange</div>
<div class="colors">Green</div>

JavaScript

//eg1 - basic each loop
$.each($('.colors'), function(index, value) {  
  console.log(index + ':' + value);
  //[object HTMLDivElement]
  //value is an object reference to the DOM representation of the div element.
  //use js/jQuery to do something useful with it - see below examples
});

//eg2 - turn into jQuery object (so it inherits jQuery API functions)
$('.colors').each(function(index, value) {  
  console.log($(value));
  //console.log($(this));  //same result
});

//eg3 - get the single native DOM element not as an array
// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
$('.colors').each(function() {  
  console.log($(this).get(0));
});

console.log('--- variations -----------------------------------------');

//eg4 - messing around...
$('.colors').each(function() {
  console.log($(this).html());  
  console.log($(this).eq(0).html());
  console.log($(this).first().html());
});

console.log('--- types ----------------------------------------------');

//eg4 - messing around...(types)
$('.colors:first').each(function() {
  console.log(typeof(this));
  console.log(this.toString());
  console.log(typeof($(this)));
  console.log($(this).toString());
});