Estoy tratando de agregar un div dinámicamente basado en el texto del div padre.

Mi html es:

<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

Por lo tanto, quiero que se inserte un div de manera que, en caso afirmativo, <div class="fa fa-check"></div> se agregue justo antes de <strong> y si se agregue No <div class="fa fa-cross"></div>.

Usando el jQuery a continuación, he logrado agregar una clase a <div class="listing_detail col-md-4">, sin embargo, no puedo entender cómo agregar el div.

Jquery:

$('.listing_detail:contains("Yes")').closest('.listing_detail').addClass('yes');

Violín

0
user38208 11 may. 2016 a las 16:23

3 respuestas

La mejor respuesta

Utilice .prepend():

$('.listing_detail:contains("Yes")').prepend('<div class="fa fa-check"></div>');

Esto resultaría en:

<div class="listing_detail col-md-4"><div class="fa fa-check"></div><strong>Living Room:</strong> Yes</div>
2
A. Wolff 11 may. 2016 a las 13:27

Utilice el jQuery .prepend ()

$('.listing_detail:contains("Yes")').closest('.listing_detail').addClass('yes').prepend('<div class="fa fa-check"><input type="checkbox"> Check me</div>');

Violín

EDITAR: cometió un error con antes / después

-1
yanntinoco 11 may. 2016 a las 17:36

prepend () debería hacer el trabajo. DEMO

En el ejemplo a continuación, si el .listing_detail div contiene la clase yes, va a anteponer div check como su primer hijo , es decir, en este caso, antepondrá ante fuerte .

 $('.listing_detail:contains("Yes")').prepend('<div class="fa fa-check"></div>');
0
Pbk1303 11 may. 2016 a las 13:27