Different ways to iterate through a jquery selection

$.each, $(..).each, $(..).toArray().forEach

by Matt Howey

HTML

<div>
  <input class="class-selector" type="text" id="field1" value=".class-selector #field1"><br/>
  <input class="class-selector" type="text" id="field2" value=".class-selector #field2"><br/>
  <input class="class-selector" type="text" id="field3" value=".class-selector #field3"><br/>
  <input class="class-selector" type="text" id="field4" value=".class-selector #field4"><br/>
</div>

<pre id="foreachOut">
**********************************************************
$('.class-selector').toArray().forEach(function(element) {
</pre>
<pre id="eachOut">
**********************************************************
$.each($('.class-selector'), function (index) {
</pre>
}
<pre id="doteachOut">
**********************************************************
$('.class-selector').each(function(index) {
</pre>

CSS

input {
  width: 200px;
  border-radius: 5px;
  height:20px;
  font-weight: 600;
  font-size: 15px;
}

JavaScript

var classSelector = $('.class-selector');

classSelector.toArray().forEach(function(element) {
	console.log(element);
	$("#foreachOut").append('|| ' + element + " || " + element.id + "<br />");
});

$.each(classSelector, function (index) {
	console.log(index);
	$("#eachOut").append('|| ' + $(this).attr('id') + "<br/>");
});

classSelector.each(function(index) {
	console.log(index);
	$("#doteachOut").append('|| ' + index + "<br />");
});