jQuery с незавершенными элементами DOM

Моя проблема связана с jQuery и элементами DOM. Мне нужен шаблон, подобный следующему:

var threadreply = " <li class='replyItem'>"
                + "     <div class='clearfix'>"
                + "         ${tittle}"
                + "     </div>"
                + " </li>"
                ;
$.template( "threadreply", threadreply );

Как видите, это элемент списка. Моя проблема заключается в том, что я анализирую его с помощью $.tmpl, который извлекает действительный элемент DOM без тегов <li> </li>.

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();

Есть ли способ получить элемент без переформатирования?

Я знаю, что могу сделать это с помощью шаблона с допустимым тегом ul и внутри каждого цикла шаблона jQuery, но я не работаю с JSON, я не могу преобразовать свои структуры данных в JSON.

Полный пример выглядит следующим образом:

var threadreply = " <li class='replyItem'>"
                + "     <div class='clearfix'>"
                + "         ${tittle}"
                + "     </div>"
                + " </li>"
                ;
$.template( "threadreply", threadreply );

var liElement = "";
for( var i = 0; i < 150; i ++ ){
    liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();
}
$(liElement).appendTo("#ULElement");

ОТРЕДАКТИРОВАНО

Я нашел обходной путь с помощью этого потока: JQuery Object to String, который состоит в обертывании каждого возвращаемого элемента DOM на $.tmpl в div перед получением .html() объекта:

liElement = liElement + $('<div>').append( $.tmpl("threadreply", {"tittle": "hello"} )).html();

С 300 элементами обработка всех элементов занимает около 290 мс. С appendTo() внутри цикла это занимает более 800 мс.


javascript jquery jquery-templates
person Alejandro González    schedule 06.04.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

вы не получаете элемент 'li', потому что когда вы это делаете

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();

вы получаете содержащийся html (или innerhtml) элемента 'li'.

HTML:

<ul id="titleList">
</ul>

js:

$.tmpl("threadreply", {"tittle": "hello"}).appendTo('#titleList');
person Timothy Groote    schedule 06.04.2011
comment
Если я сделаю то, что вы говорите, когда я alert(liElement); полон [object]. Я ничего не могу с ними сделать. - person Alejandro González; 06.04.2011
comment
вы можете использовать jQuery .appendTo для достижения того, чего хотите. я обновил ответ для вас. - person Timothy Groote; 06.04.2011
comment
Я знаю, что могу это сделать, но когда у меня есть цикл со 150 итерациями, я не хочу appentTo(); напрямую обращаться к объекту DOM. Вместо этого я хочу собрать все в переменной, а затем, когда цикл завершится, добавить ее. Я собираюсь обновить вопрос с полным кодом. - person Alejandro González; 06.04.2011
comment
вы можете создать новый пустой элемент jQuery и использовать для него appendTo, а затем добавить новый, теперь уже заполненный элемент jQuery в свой документ где-нибудь. - person Timothy Groote; 06.04.2011
comment
я сделал некоторый тест и подумал, что вы не можете добавить к пустому элементу. Несмотря на это, таким образом вы делаете 150 appendTo(); Ведьма занимает очень много времени. - person Alejandro González; 06.04.2011
comment
Я обновляю вопрос, чтобы включить лучший обходной путь, который я нашел до сих пор. - person Alejandro González; 07.04.2011

arrow_upward
1
arrow_downward

Вам просто нужна строка, а не настоящий элемент DOM. Просто используйте:

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"});

Вне цикла вам нужно обернуть только что сгенерированный HTML-код в новый элемент, а затем заменить прежний li:

$('<li />').html(liElement).replaceAll('li#existingLiID');
person Camilo Díaz Repka    schedule 06.04.2011
comment
я ничего не могу сделать с liElement после цикла, если я не возьму .html() - person Alejandro González; 06.04.2011
comment
Похоже, вам нужно обернуть созданный HTML-код в новый элемент li, а затем заменить прежний li. Смотрите мое обновление. - person Camilo Díaz Repka; 06.04.2011
comment
Это все еще не работает. Настоящая проблема заключается в том, что $.tmpl возвращает объект DOM, и я не могу объединить его с переменной. Если вы используете .html() для получения html объекта, он возвращает innerHtml первого объекта DOM, в данном случае li, который является div. - person Alejandro González; 07.04.2011