如果父类存在，则jQuery追加跨度

Question

这是我的目标：

如果任何父 <li> 具有类 outofstock，我想在 .inner_product_header 内附加一个 <span>（在 onsale 范围之后）。

我的代码：

HTML：

<ul class="products">
<li class="product outofstock"> <a href="#">
    Test text description
        <div class="inner_product_header">
            <span class="onsale">On Sale</span>
        </div>
    </a>

</li>
<li class="product"> <a href="#">
    Test text description
    <div class="inner_product_header">
            <span class="onsale">On Sale</span>
        </div>
    </a>

</li>
</ul>

JS：

$(function() {

    if ( $( 'ul.products li.product' ).hasClass( 'outofstock' ) ) {

    $(this).children('.inner_product_header').append('<span class="itscomingsoon">Coming Soon</span>');

}

});

这是我的 jsFiddle 样式以查看块：http://jsfiddle.net/8szFV/4/

我不知道哪里出错了。有什么想法吗？

Answer 1

在您的代码中，您使用的是$(this)，但您不在绑定this 的事件处理程序或.each() 循环中。

但您可以在一条线中完成所有操作。

jQuery(function($) {
    $("ul.products li.product.outofstock .inner_product_header").append('<span class="itscomingsoon">Coming Soon</span>');
});

DEMO