jquery - 如果第一个孩子是 iframe

Question

我试图找出一个 div 的第一个孩子是否是 iframe，如果是，请将其添加到另一个 div。我正在对图像做一些非常相似的事情，但它们更容易找到，因为它们总是在第一个p元素内。这就是我所拥有的引发children[0] is undefined错误的东西。

     $(".post").each(function() {

    if($(this).find(".post-excerpt").children[0].nodeName.has('iframe').length){

            $(this).prepend("<div class='featured-video'></div>");

            $(this).find(".post-excerpt").children[0].nodeName.has('iframe').prependTo($(this).find(".featured-video"));
    }
}); 

我的 HTML 如下所示：

<article class="post twelve columns centered">
    <header class="post-header">
        <h2 class="post-title"><a href="#">Title</a></h2>
    </header>
    <section class="post-excerpt">
        <iframe height="166" src="http://something.com"></iframe>
    </section>
</article>

Answer 1

这个怎么样？

$('section.post-excerpt').each(function(){
    var $el = $(this);
    var $firstChild = $el.children().first();

    if ($firstChild.prop('tagName') == 'IFRAME') {
        alert('It is an iframe');
    }
});

在这里，我为您制作了一个 JSFiddle。http://jsfiddle.net/uGAqY/

Answer 2

您可以使用first-child选择器：

$(".post").each(function() {
    if ( $(this).find(".post-excerpt iframe:first-child").length ) {
       // ...
    }
}); 

Answer 3

$(this).find(".post-excerpt")是 jQuery 对象，作为 jQuery 对象，它具有children功能，而不是属性

这是jsFiddle

$(".post").each(function () {
    var firstChild = $(this).find(".post-excerpt").children().get(0)

    if (firstChild && firstChild.nodeName.toLowerCase() == 'iframe'){
        var container = $("<div class='featured-video'></div>")
        container.prepend(firstChild);
        container.prependTo(this);
    }
});