JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<div class="coolio">
  <p class="dre"><input /></p>
  <p class="snoop"><input /></p>
  <p class="snoop"><input /></p>
  <p class="dre"><input /></p>
  <p class="dre"><input /></p>
</div>
<hr />
<div class="eminem">
  <p class="dre"><input /></p>
  <p class="snoop"><input /></p>
  <p class="snoop"><input /></p>
  <p class="dre"><input /></p>
  <p class="dre"><input /></p>
</div>

JavaScript

var $wrapper = $('.coolio');
var $rapper = $('.eminem');

// To illustrate be don't need to use .each()
$wrapper.find($('.dre input')).each(function() {
	$(this).val('found using find');
});

$('.snoop input', $wrapper).val('found NOT using find');
// END

// To illustrate when we might want to use .each()
$rapper.find($('p')).each(function() {
	if ($(this).hasClass('dre')){
		$('input', this).val('found using find');
  } else {
  	$('input', this).val('No class .dre');
  }
});
// END