jquery - 通过 jquery 在 ul 中插入列表项

Question

我正在尝试在 ul-item 中插入一些填充有 JSON 内容的列表项，但我无法正确操作，而且我不知道我做错了什么。

这是我正在使用的代码:

var over_slide = $('<div id="slider" class="slider"></div>');

over_slide.append('<ul class="orslider">');

$.each(jsonobject, function (index, d) {
    if (d.category_id == 5) {
        over_slide.append("<li><h1 class='cufon'>" + d.naam + "</h1><h2 class='cufon'>" + d.subtekst + "</h2><p>" + d.tekst + "</p></li>");
    }
});

over_slide.append('</ul>');

当我访问该页面时查看源代码时，它有一个带有正确类名的空 ul，并且所有列表项都放置在 ul 之外。我怎样才能解决这个问题？我已经尝试了很多，但还是不行。

Answer 1

生成的 li 及其内容将附加到 div 而不是 li。

var over_slide = $('<div id="slider" class="slider"></div>');

var ul = $('<ul/>', {"class":"orslider"};  //create new ul object

$.each(jsonobject, function(index, d){    
     if(d.category_id == 5){
         //append elements to the ul instead of the div
         ul.append("<li><h1 class='cufon'>"+d.naam+"</h1><h2 class='cufon'>"+d.subtekst+"</h2><p>"+d.tekst+"</p></li>"); 
     }
});
over_slide.append(ul);
//at somepoint over_slide needs to be appended to the DOM

为了更好的性能

var over_slide = $('<div id="slider" class="slider"></div>');

var ul = $('<ul/>', {"class":"orslider"};  //create new ul object
var html = "";
$.each(jsonobject, function(index, d){    
     if(d.category_id == 5){
         //append elements to var
         html += "<li><h1 class='cufon'>"+d.naam+"</h1><h2 class='cufon'>"+d.subtekst+"</h2><p>"+d.tekst+"</p></li>"; 
     }
});

//only perform append once
ul.append(html);

over_slide.append(ul);
//at somepoint over_slide needs to be appended to the DOM