JQuery с неполными элементами DOM - PullRequest
Новая
       13

JQuery с неполными элементами DOM

1 голос
/ 06 апреля 2011

Моя проблема связана с 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");

EDITED

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

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

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

Ответы [ 2 ]

3 голосов
/ 06 апреля 2011

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

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

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

html: 

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

js: 

$.tmpl("threadreply", {"tittle": "hello"}).appendTo('#titleList');
1 голос
/ 06 апреля 2011

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

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

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

$('<li />').html(liElement).replaceAll('li#existingLiID');
...