JSFiddle - React, Tailwind, and code Playground

HTML

<div data-id="1">
  <iframe src="" frameborder="0"></iframe>
</div>

<div data-id="2">
  <div></div>
</div>

<div data-id="3"></div>

<div data-id="4">
  <div> 
    <iframe src="" frameborder="0"></iframe>
  </div>
</div>

CSS

body > div {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #e1e1e1;
  overflow: hidden;
}

iframe { display: none; }

JavaScript

// The gist of it is you look for an element and check the returned array length to see if it was found. If body returns a number above 0, that means it was found and this returns true: 
// $('body').length > 0; // true
// $('body-builder').length > 0; // false

// Of course you need to be very specific with your selectors so that the element you are looking for can't be mistaken for another... 

// In this scenario below, if there was ever a change there were other iframes on the same level or you wanted to nest it deeper, you could add a class to the iframe (or around it) to make it easier to target without catching anything else in the net:
// $('[data-id="1"] iframe.the-iframe-i-want').length > 0;
// or
// $('[data-id="1"] .the-iframe-wrapper > iframe').length > 0;



$('body > div').each(function() {
	
	// You can ignore the first each() method above. It's there just to loop through multiple items to show what kind of results you get
	var hasIframe = $(this).find('> iframe').length;
  if ( hasIframe ) console.log( 'found item id:', $(this).data().id );

});
// Returns: "found item id:", 1



// Or outside a loop...
var iframe = $('[data-id="1"] > iframe');
if ( iframe.length > 0 ) {
	
  console.log( 'has iframe:', iframe.length > 0 );
  // Returns: "has iframe:", true

  // And to then take action when we've confirmed the iframe was found...
  iframe.parent().css({ border: '1px solid red' });
  
}