jQuery işlevi

Question

aşağıdaki fonksiyonlara sahiptir:

benim sorunum çalışma anında html gibi görüntülenmekte olduğunu olduğunu

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

: böylece tüm sayfa

berbat ediliyor <div class="car-offers"></div>

Answer 1

.append() ile eksik HTML parçalarını ekleyemezsiniz. document.write'dan farklı olarak jQuery'nin .append() yöntemi, aktarılan dizgeyi DOM'a eklemeden önce öğelere ayrıştırır.

Yani bunu yaptığında:

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

jQuery div öğesinin içine verilen dizeyi ayrıştırır ve className özelliğine car-offers değerini atar, sonra #result elemana yeni oluşturulan eleman ekler.

Tek bir işlemde tüm HTML dizesini eklemek bunu düzeltecektir, bu nedenle jQuery verilen dizenin doğru şekilde nasıl ayrıştırılacağını bilir.

---

Şahsen, bir JS dosyasının içine çok fazla HTML koymanızı öneriyorum. Bunu'un içine display:none ile girmeyi düşünebilirsiniz, daha sonra üzerine .show()'u arayın. Ya da başlangıçta sayfada, .detach() bir değişkende saklanır ve gerektiğinde geri .append().

Answer 2

Bu

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

Bu sadece çok karşılaşanlar bir konudur çözmek için join bir dizi kullanabilirsiniz.

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

}