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);
    }
});

如果第一个孩子是iframe

3 个答案: