1

我正在尝试在 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 之外。我怎样才能解决这个问题？我已经尝试了很多，但它仍然无法正常工作。

4

1 回答 1

3

生成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
于 2013-07-24T09:05:24.607 回答