Jquery - 如果元素包含一个类，则在元素后添加 HTML答案

【问题标题】：Jquery - if element contains a class, add HTML after elementJquery - 如果元素包含一个类，则在元素后添加 HTML
【发布时间】：2020-02-17 04:18:57
【问题描述】：

我有一个预订 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 之前？

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案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>

【讨论】：

顺便说一句，长度属性是做什么的？
@JoeBloggs，选择器返回对象，这就是为什么你必须检查 length 属性:)

【解决方案2】：

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

例子：

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

【讨论】：

非常感谢 Nikola，我会接受 Mamun 的回答 ..
使用 prepend 更简单、更干净，但我不介意："D 祝你的项目好运。

【解决方案3】：

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

试试这个

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

【讨论】：

【解决方案4】：

试试这个 jQuery。

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

【讨论】：

【解决方案5】：

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

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

【讨论】：