我正在尝试使用jQuery使用JSON填充有序列表,但数据未添加到列表中。我将我的代码粘贴在Fiddle中,它似乎正常工作。
JavaScript文件:
var data = {
"product": [
"Product 1",
"Product 2",
"Product 3"
],
"company": [
"Company 1",
"Company 2",
"Company 3"
],
"contact": [
"Contact 1",
"Contact 2",
"Contact 3"
]
};
$.each(data, function (key, value) {
if (key === 'product') {
for (var i = 0; i < value.length; i++) {
var option = ('<li>' + value[i] + '</li>');
$('#product').append(option);
}
}
if (key === 'company') {
for (var i = 0; i < value.length; i++) {
var option = ('<li>' + value[i] + '</li>');
$('#company').append(option);
}
}
if (key === 'contact') {
for (var i = 0; i < value.length; i++) {
var option = ('<li id="new">' + value[i] + '</li>');
$('#contact').append(option);
}
}
});
$('#cssmenu > ul > li > a').click(function () {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
}
else {
return false;
}
});
HTML:
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a>
</li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul id='product'>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul id='company'>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a>
<ul id='contact'>
</ul>
</li>
</ul>
</div>
以下是Fiddle中的代码:
我目前在Visual Studio 2010中使用Mobile Ready HTML5 MVC.NET模板。
我正在我的项目中使用其他jQuery代码正常工作,所以我怀疑这是一个源问题。
任何帮助都将不胜感激。
答案 0 :(得分:0)
你的json不合适。
http://jsfiddle.net/vsah/R3dcw/9/
var data = {
"data":{
"product": [
"product1",
"product2",
"produc3"],
"company": [
"company1",
"company2",
"company3"]
}
}
$.each(data, function (key, value) {
if(value.product){
var product = '<ul data-role="listview">'
$.each(value.product, function (key, value) {
product += '<li>'+value+'</li>';
});
$("#product").append(product).trigger('create');
}
if(value.company){
var company = '<ul data-role="listview">'
$.each(value.company, function (key, value) {
company += '<li>'+value+'</li>';
});
$("#company").append(company).trigger('create');
}
});