Reputation: 3365

jQuery Each Loop is triggering if statement on each loop

I have a jQuery each loop that is looking for everything with the class .big-box-300x250 on my page and appending a number of ad scripts for Google DFP.

What I want to occur is that if the containing div has an iFrame it should trigger the if statement and set the parents height. The problem I'm having is that each time the script loops it always triggers the if statement and doesn't seem to be selective about what it hides and shows.

    $('.big-box-300x250').each(function(index) {
        var display = $(this).data("desktop-display");
        if (display == true){

          var feedData = $(this).data('ad-type');
          var ad_script = '<script type="text/javascript">googletag.cmd.push(function() { googletag.display("' + feedData + '"); });</script>';
          $(this).append(ad_script);

            if ($(this).has('iframe')) {
                console.log("Triggering");
                $(this).parent().height(250)
                $(this).parent().css("margin", "20px 0")
                $(this).show();
            }
        }
    });

The data pulled in from the feedData variable is unique, and also utilized for the ID too. For example the div might look something like this:

<div id="div-gpt-ad-1450382754763-1" class="pb-ad-container big-box-300x250 border-bottom-hairline" data-mobile-display="false" data-desktop-display="true" data-ad-type="div-gpt-ad-1450382754763-1" style="">

How can I fix this script so on every loop it looks at each ad div individually, determines if it has an iFrame, and then runs the script accordingly before going onto the next one.

This is what the generated markup looks like. The top two are working ads, and the second one is an empty ad with no content. The top two are the ones I want to trigger the if statement on, however it triggers on all of them.