JQuery append - открытие и закрытие тега

У меня есть блок jquery вроде этого. После визуализации html я вижу, что тег <article> открывается и закрывается немедленно, так же, <div class=bar> открывается и закрывается немедленно. Я делаю что-то неправильно в своей части кода. Любой лучший способ реализовать этот?JQuery append - открытие и закрытие тега

Благодаря

$.each(filterresult.result, function(index, value) { 
           $('#newslist') 
           .append('<article class="preview">') 
           .append('<div class="bar">') 
           .append('<span class="left"><small>').append(value.dTime) 
           .append('</small></span><span class="right text-sm gray-text">') 
           .append(value.author) 
           .append('</span></div>').append('<h3 class="tighter"><a class="black" href="#">') 
           .append(value.title) 
           .append('</a></h3') 
           .append('<div class="media-block medium"><figure><span class="box blue">Products & Services</span><img src="http://placeholder.levelfivesolutions.net/140x105.png" alt="" title="" /></figure>') 
           .append('<div class="details">') 
           .append(value.teaser) 
           .append('<div class="bar"><span class="left"><a class="blue" href="#"><span class="gray-text">&raquo;</span> Read More</a></span><span class="right text-sm"><a class="comment-icon" href="#">12 Comments</a></span></div>') 
           .append('</div>') 
           .append('</div>') 
           .append('</article>');  
        });

источник

2013-05-29 Sri Ram

Нет, это ожидаемое поведение – zerkms

-1

Если вы хотите, чтобы все элементы в статье тег, вы должны написать:

.append(
    $('<article class="preview">) 
    .append(...) 
)

источник

2013-05-29 21:29:46 benestar

функция Append Jquery занимает узел DOM, строка HTML, или объект яваскрипта как вход. Поэтому, когда вы вызываете свое первое приложение, для статьи нет закрывающего тега, поэтому он создает его в полный узел DOM, добавляя к нему закрывающий тег. Затем, когда вы переходите к добавлению следующего элемента, он фактически добавляется полностью после предыдущего узла DOM (после закрывающего тега).

Вместо этого я рекомендую сначала создать строку HTML, а затем добавить ее все сразу.

Например, вы должны сделать следующее:

var html = "<article class='preview'><div class='bar'><span class='left'><small>........"; 
$("#newlist").append(html);

Конечно, есть лучшие способы сделать это, например, используя шаблонизатор, такие как Mustache.JS, но это должно по крайней мере, получить его для вас.

Надеюсь, что это помогает

источник

2013-05-29 21:29:55

Спасибо за ответ. Могу ли я сказать, что это лучший способ сделать это? –

Я лично предпочел бы использовать механизм шаблонов, но это зависит от того, сколько раз вам нужно это делать. Честно говоря, все в порядке, если это редкое явление, но если вам нужно сделать это более двух-трех раз, я бы сделал HTML с помощью механизма шаблонов, такого как Mustache.JS (https://github.com/janl/mustache .js /) –

Вместо добавления каждой строки вы можете сохранить его в переменной, как показано ниже, и добавьте все это вместе:

content = ''; 

content += '<article class="preview">'; 
content += '<div class="bar">'; 
content += '<span class="left"><small>'+value.dTime+'</small></span>';

И так далее.

Затем добавьте содержимое в конце. Просто включите его в свою функцию.

источник

2013-05-29 21:33:48 jah

JQuery append - открытие и закрытие тега

ответ

Смежные вопросы