javascript - Jquery - 如果元素包含一个类，在元素之后添加 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

任何选择器都会返回一个对象，您应该检查返回对象的length 属性。像 $('.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>