jQuery Each Loop is triggering if statement on each loop

Question

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.

Do you have any elements with class big-box-300x250 that are nested inside other elements with class big-box-300x250? — Matt Browne
– Matt Browne, Commented Feb 26, 2016 at 1:53
@MattBrowne Negative. There are multiple items with big-box-300x250 on the page, but they are not nested within each other. — James Ives
– James Ives, Commented Feb 26, 2016 at 1:56

The Process · Accepted Answer · 2016-02-26 01:54:23Z

1

Here you should check if the .length is >0, because .has() method doesn't return boolean value

 if ($(this).has('iframe').length>0) {

answered Feb 26, 2016 at 1:54

The Process

5,9533 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

charlietfl Over a year ago

don't even need the >0 part ... length can be used as boolean

Matt Browne Over a year ago

Yes. Just for some additional clarification (now that I understand the issue)...the return value of has() will always be a jQuery object (even if it's an empty one), so it will always evaluate to true.

The Process Over a year ago

@ Matt Browne exactly

James Ives Over a year ago

Strangely this still doesn't seem to do the trick. It doesn't fire the if statement, even on a timeout. Although one thing I have noticed is that the script seems to generate two iFrames. An empty one within (this) and a second one made within a containing div. What would be the best way to select that? $(this).find("div").has("iframe").length > 0 ?

James Ives Over a year ago

I also attached a screenshot of the markup in case that helps.

|

alexandergs · Accepted Answer · 2016-02-26 01:54:08Z

0

Try this:

if ($(this).has('iframe').length)

answered Feb 26, 2016 at 1:54

alexandergs

1922 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery Each Loop is triggering if statement on each loop

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related