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

通过jquery在ul中插入list-item

1 个答案: