Question

I’m working on a page on which I’m dynamically creating a Facebook Like button when a user clicks on a picture icon. (Since there are so many items on the page, if I didn’t, the page load comes to a severe crawl.).

If I run this in Firebug:

var $clickTrackerGroup= $("#click-tracker-91");
console.log ($(".user-message-block", $clickTrackerGroup).html());
if ($(".user-message-block:has(div.hbo-message_likeBtn)", $clickTrackerGroup)) {
        console.log("this group DOES NOT have an iframe");
} else { 
        console.log("this group DOES have an iframe"); 
    }

I get this:

<div class="image-container">
    <img src="http://graph.facebook.com/1422524707/picture" id="person-222-clicked" alt="AMANDA H" title="AMANDA H" width="50px" height="50px"></div> 
    <div class="user-message"> 
        <span class="message-text">
            "ipsum lorem....."</span> 
            <div class="message-create-time"> 
                <span class="create-time">1/28/2011 7:33:17 AM</span> 
                <span class="user-name"> - Amanda H.</span> 
            </div> 
    </div>
    <div class="hbo-message_likeBtn">
        <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.honeybunchesofoats.com%2FBunchesOfLove.aspx%2FMessage%2F250&amp;layout=standard&amp;show_faces=false&amp;width=250&amp;action=like&amp;colorscheme=light&amp;height=35" 
            style="border: medium none ; overflow: hidden; width: 250px; height: 35px;" allowtransparency="true" 
            frameborder="0" scrolling="no"></iframe>
        </div>

this group does not have an iframe

I also tried:

if ($(".user-message-block:has(iframe)", $clickTrackerGroup)) {
    console.log("this group DOES have an iframe");
} else { 
    console.log("this group DOES NOT have an iframe"); 
    }

You can plainly see that the this block of html DOES, in fact, have an iframe in it.

How can I successfully test for the existence of this element?

Thanks,
Scott

Answer 1

How about:

if ($(".user-message-block iframe", $clickTrackerGroup).length === 0) {
    // no iframe selected => iframe does not exist
    console.log("this group does not have an iframe");
}

Reference: .length