Fonction Jquery fermeture de div sur ajout en soi

Vous ne pouvez pas ajouter des fragments incomplets de HTML avec .append() . Contrairement à document.write , la méthode .append() de jQuery analyse la chaîne passée en éléments avant de les ajouter au DOM.

Donc, quand vous faites:

 $("#result").append('<div class="car-offers">'); 

JQuery analyse la chaîne donnée dans un élément div et attribue la valeur de l' car-offers à sa propriété className , puis ajoute l'élément nouvellement créé à l'élément #result .

L'ajout de l'ensemble de la chaîne HTML en une seule opération va le résoudre, donc jQuery sait comment analyser correctement la chaîne donnée.

Personnellement, je ne suggérerais pas de mettre autant de HTML dans un fichier JS. Vous pouvez envisager de mettre cela à l'intérieur d'un div avec l' display:none puis appelez simplement .show() sur celui-ci. Ou l'avoir initialement dans la page, .detach() il stocke dans une variable et .append() il le retourne si nécessaire.

Vous pouvez utiliser un tableau avec une jointure pour résoudre ce problème

 function displayResults(Items) { $("#result").text(""); var array = []; array.push('<div class="car-offers">'); array.push('<div class="purple"></div>'); array .push('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />'); array.push('<h3>titleeee</h3>'); // ' + Items[i].Title + ' array.push('<span>Year: 2003</span>'); array.push('<span>Milage: 172,000 Km</span>'); array.push('<span class="price">53,000 QR</span>'); array.push('<a href="">Link</a>'); array.push('</div>'); array.push('<div class="car-offers">'); array.push('<div class="purple"></div>'); array .push('<img src="images/caroffer.jpg" alt="" title="" width="213" height="117" />'); array.push('<h3>titlee22</h3>'); // ' + Items[i].Title + ' array.push('<span>Year: 2003</span>'); array.push('<span>Milage: 172,000 Km</span>'); array.push('<span class="price">53,000 QR</span>'); array.push('<a href="">Link</a>'); array.push('</div>'); $("#result").text(array.join('')); } 

C'est un problème que je viens de rencontrer. Une option est de créer les conteneurs div premiers dans une boucle, puis les remplir après que vous en avez besoin:

 for(var i = 0; i < 12; i++){ $(el).append('<li class="scene-block"></li>'); // create container li tags //fill empty li tags with content for(var j = 0; j < 2; j++){ $(el).find('li').last().append('<div class="select-a-scene-bg"></div>'); } }