Jquery - 如果元素包含 class，则在元素后添加 HTML

Question

我有一个预订form.booking-wrap ，里面有 2 个元素， div#booking ，然后div.quantity

<form class="booking-wrap"> 
    <div id="booking"></div>
    /* insert div#message IF div.quantity is present inside div.booking-wrap */ 
    <div class="quantity"></div>
</form>

div.quantity仅对某些预订动态显示。

我想要实现的是，如果div.quantity存在，那么我想插入一个额外的 html div#message ，但是这个新的 div 应该出现在div#booking之后和之前div.quantity

我正在尝试以下 jQuery：

if($('.booking-wrap:has(div.quantity)')){
  $('#booking' ) .after( '<div id="message">Message</div>');
}

但这似乎不起作用。

然后我尝试了这个：

$('.booking-wrap:has(div.quantity)').append($('<div id="message">Message</div>'));

这有效，新的 div 出现，但它就在数量 div 旁边。

如何在#booking之后但在.quantity之前显示它？

Answer 1

尝试使用prepend而不是 append，因为选择器$('.booking-wrap:has(div.quantity)将返回(div.quantity)元素。

例子：

$('.booking-wrap:has(div.quantity)').prepend($('<div id="message">Message</div>'));

Answer 2

任何选择器都返回 object，您应该检查返回的 object 的长度属性。 像$('.booking-wrap:has(div.quantity)').length

不过，我更喜欢$('.booking-wrap > div.quantity').length

 if($('.booking-wrap > div.quantity').length){ $('#booking').after('<div id="message">Message</div>'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="booking-wrap"> <div id="booking">booking</div> <div class="quantity">quantity</div> </form>

Answer 3

您可以使用“hasClass()” jQuery function 检查 class 是否存在：

尝试这个

if($( ".booking-wrap" ).children('div').hasClass( "quantity" )){
  jQuery('<div id="message">Message</div>').insertAfter('.booking');
}

Answer 4

试试这个 jQuery。

if($(".quantity").length ){
    $('#booking' ).after( '<div id="message">Message</div>');
}

Answer 5

您需要将要添加的 div 放入 function 中。

        if($('.booking-wrap:has(div.quantity)')){
            $( "#booking" ).after(function() {
                return '<div id="message">Message</div>';
            });
        }