Jquery funkcja zamykania div na dołączenie przez siebie

Question

Mam następującą funkcję:

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

moim problemem jest to, że w czasie wykonywania html jest wyświetlany jak: <div class="car-offers"></div> więc cała strona jest zawiedli

Answer 1

Nie można dołączać niekompletnych fragmentów kodu HTML za pomocą .append(). W przeciwieństwie do document.write, metoda jQuery's .append() analizuje przekazany ciąg znaków do elementów przed dołączeniem ich do DOM.

Więc kiedy zrobić:

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

jQuery analizuje dany ciąg do elementu div i przypisuje wartość do jego className własności car-offers, następnie dołącza nowo utworzony element do elementu #result.

Dołączenie całego ciągu HTML w pojedynczej operacji naprawi to, więc jQuery wie, jak poprawnie przeanalizować podany ciąg.

---

Osobiście nie sugerowałbym umieszczania tak dużej ilości HTML wewnątrz pliku JS. Możesz rozważyć umieszczenie tego wewnątrz div za pomocą display:none, a następnie po prostu zadzwoń pod numer .show(). A może to początkowo na stronie, .detach() to przechowywanie w zmiennej i .append() go w razie potrzeby.

Answer 2

Można użyć tablicę z join rozwiązać ten

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

Jest to kwestia Właśnie natknąć się zbyt. Rozwiązaniem jest stworzenie pojemniki div pierwszy w pętli następnie wypełnić je po jak wymagać:

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

}