Tengo una reserva form.booking-wrap con 2 elementos, div#booking y luego 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 solo está presente dinámicamente para algunas reservas.

Lo que estoy tratando de lograr es que si div.quantity está presente, entonces me gustaría insertar un html adicional div#message, pero este nuevo div debería aparecer después de div#booking y antes de {{X3 }}

Estoy intentando lo siguiente jQuery:

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

Pero eso no parece funcionar.

Entonces probé esto:

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

Esto funciona y aparece el nuevo div, sin embargo, está justo al lado del div de cantidad.

¿Cómo puedo hacer que se muestre después de #booking, pero antes de .quantity?

3
Joe Bloggs 21 oct. 2019 a las 08:17

5 respuestas

La mejor respuesta

Cualquier selector devuelve un objeto, debe verificar la propiedad length del objeto devuelto. Me gusta $('.booking-wrap:has(div.quantity)').length

Sin embargo, prefiero $('.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>
1
Mamun 21 oct. 2019 a las 05:48

Intente usar prepend en lugar de agregar, ya que el selector $('.booking-wrap:has(div.quantity) devolverá el elemento (div.quantity).

Ejemplo:

$('.booking-wrap:has(div.quantity)').prepend($('<div id="message">Message</div>'));
1
Nikola Petrovic 21 oct. 2019 a las 05:22

Prueba este jQuery.

if($(".quantity").length ){
    $('#booking' ).after( '<div id="message">Message</div>');
}
0
Krupal Panchal 21 oct. 2019 a las 05:33

Debe poner el div que está agregando dentro de una función.

        if($('.booking-wrap:has(div.quantity)')){
            $( "#booking" ).after(function() {
                return '<div id="message">Message</div>';
            });
        }
0
craft9841 21 oct. 2019 a las 05:46

Puede usar la función jQuery "hasClass ()" para verificar si la clase existe o no:

Pruebe Esto

if($( ".booking-wrap" ).children('div').hasClass( "quantity" )){
  jQuery('<div id="message">Message</div>').insertAfter('.booking');
}
0
Abhishek Gupta 21 oct. 2019 a las 05:28