html - How to check class name exist in child div; of parent div using jquery? -

how check whether div class within div class exist or not?

in following example; want check whether "showonload" div class exist inside; parent div class "hideunhidepanel"?

<div id="lodadiv" hidden="true"  class="hideunhidepanel">   <div class="showonload">   </div>   <div class="showonload">   </div>   <div class="showonload">   </div> </div>  <div id="load2div" hidden="true"  class="hideunhidepanel"> //nothing exist </div> 

jquery code:

$('.hideunhidepanel').each(function() { alert('yo'); if($(this).children('showonload')) alert('child exist'); }); 

fiddle: https://jsfiddle.net/5h49x7qe/

update:
note -> in fiddle, displaying alert thrice; in actual should show 2 times only; third showhidepanel not have "showonload" class.

.children() return jquery object, irrespective of whether 1 exists or not, truthy. can check length of jquery object see whether element if present in jquery object or not.

also missing class selector . before showonload in children('showonload')

$('.hideunhidepanel').each(function() {    snippet.log('yo: ' + this.id);    if ($(this).children('.showonload').length) {      snippet.log('child exist');    }    });

<!-- provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="lodadiv1" hidden="true" class="hideunhidepanel">    <div class="showonload"></div>    <div class="showonload"></div>    <div class="showonload"></div>  </div>  <div id="lodadiv2" hidden="true" class="hideunhidepanel">    <div class="showonload"></div>    <div class="showonload"></div>    <div class="showonload"></div>  </div>  <div id="lodadiv3" hidden="true" class="hideunhidepanel"></div>

---

but if want iterate on hideunhidepanel showonload can use .has()/:has()

$('.hideunhidepanel').has('.showonload').each(function() {    //or $('.hideunhidepanel:has(.showonload)').each(function() {    snippet.log('child exist: ' + this.id);  });

<!-- provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div id="lodadiv1" hidden="true" class="hideunhidepanel">    <div class="showonload"></div>    <div class="showonload"></div>    <div class="showonload"></div>  </div>  <div id="lodadiv2" hidden="true" class="hideunhidepanel">    <div class="showonload"></div>    <div class="showonload"></div>    <div class="showonload"></div>  </div>  <div id="lodadiv3" hidden="true" class="hideunhidepanel"></div>