funzione Jquery chiusura div sulla accodare da solo

Question

Ho la seguente funzione:

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

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

mio problema è che in fase di esecuzione viene visualizzato il codice HTML come: <div class="car-offers"></div> in modo che tutti la pagina viene incasinato

Answer 1

Non è possibile aggiungere frammenti incompleti di HTML con .append(). A differenza di document.write, il metodo .append() di jQuery analizza la stringa passata in elementi prima di aggiungerli al DOM.

Così, quando lo fai:

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

jQuery analizza la stringa data in un elemento div e assegna il valore car-offers alla sua proprietà className, quindi aggiunge l'elemento appena creato all'elemento #result.

L'aggiunta dell'intera stringa HTML in una singola operazione risolverà il problema, quindi jQuery sa come analizzare correttamente la stringa specificata.

---

Personalmente, non suggerirei di inserire molto HTML all'interno di un file JS. Puoi considerare di inserirlo all'interno di uncon display:none, quindi chiamare semplicemente .show(). O averlo inizialmente nella pagina, .detach() lo memorizza in una variabile e .append() indietro quando necessario.

Answer 2

è possibile utilizzare un array con join per risolvere questo

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('')); 
} 

Answer 3

Questo è un problema che ho appena venuto anche attraverso. Un'opzione è quella di creare dei contenitori div prima in un ciclo quindi popolare loro dopo come richiedete:

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>'); 
    } 

}