Функция закрытия JQuery закрывается отдельно

У меня есть следующая функция:

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

моя проблема в том, что во время выполнения html отображается как: <div class="car-offers"></div>, поэтому вся страница перепутана

Ответы

Ответ 1

Вы не можете добавить неполные фрагменты HTML с .append(). В отличие от document.write, метод jQuery .append() анализирует переданную строку в элементы перед добавлением их в DOM.

Итак, когда вы это сделаете:

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

jQuery анализирует данную строку в элементе div и присваивает значение car-offers свойству className, а затем добавляет вновь созданный элемент к элементу #result.

Добавление всей строки HTML в одной операции будет исправлено, поэтому jQuery знает, как правильно разобрать данную строку.

Лично я бы не предложил помещать много HTML внутри JS файла. Вы можете рассмотреть возможность помещать это внутри div с помощью display:none, а затем просто называть .show() на нем. Или сначала его на странице .detach(), который он хранит в переменной, и .append() при необходимости.

Ответ 2

Вы можете использовать массив с join, чтобы решить эту проблему

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

Ответ 3

Это проблема, с которой я только что столкнулся. Опция состоит в том, чтобы сначала создать контейнеры div в цикле, а затем заполнить их по мере необходимости:

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

}