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?

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>

Answer 2

Попробуйте использовать prepend вместо добавления, так как селектор $('.booking-wrap:has(div.quantity) вернет элемент (div.quantity).

Пример:

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

Answer 3

Вам нужно поместить добавляемый вами div в функцию.

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

Answer 4

Попробуйте это jQuery.

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

Answer 5

Вы можете использовать функцию jQuery hasClass (), чтобы проверить, существует класс или нет:

Попробуйте это

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