jQuery - 如果元素包含一个类，则在该元素后添加HTML

Question

我有一个预订表格form.booking-wrap，其中包含两个元素，分别是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之前？

- Joe Bloggs

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>

- Mamun

---

顺便问一下，length 属性是做什么用的？ - Joe Bloggs

@JoeBloggs，选择器返回对象，这就是为什么你必须检查length属性的原因 :) - Mamun

Answer 2

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

示例：

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

- Nikola Petrovic

---

非常感谢你，尼古拉。我会采用马蒙的答案。 - Joe Bloggs

使用prepend更简单、更清晰，但我不介意："D 祝你的项目好运。 - Nikola Petrovic

Answer 3

你可以使用 "hasClass()" jQuery 函数来检查类是否存在：

试一下

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

- Abhishek Gupta

Answer 4

试试这个 jQuery。

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

- Krupal Panchal

Answer 5

你需要将你添加的div放在一个函数中。

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

- craft9861