如果第一个孩子是 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函数，而不是属性

这里是JS小提琴

$(".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);
    }
});