我是JS和Jquery的新手
我需要在json中显示从服务器返回的结果。我有一个json数组，其结果可以通过data["json"]变量访问。
数组中的每个结果都有一个链接和标题
我希望能够在一行中显示每一对，作为HTML中某个列表的一部分。结构应该像：
title：[title]，链接：URL
title：[标题]，链接：URL等等。
我尝试过使用以下JS函数，但没有成功（从这里开始）
我想我目前还没有理解这个函数，因此：
如果你也能给我解释一下美元部分的含义。（"list>ul）和函数部分（索引，元素）=>索引和元素得到的值是什么，为什么？
function DisplayListItems(list) {
alert("in display:" + list["json"]);
$.each(list["json"], function(index, element) {
var itemHTML = ["<li>",
"<div>",
"<div>",
element.link,
"</div>",
"<div>",
element.title,
"</div>",
"</div>",
"</li>"].join(''n');
$(".list > ul").append(itemHTML);
}
}
客户应该处理的Json结果示例：
[{"link":"http:'/'/en.wikipedia.org'/wiki'/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:'/'/www.balloons.com'/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:'/'/www.partycity.com'/category'/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:'/'/clashofclans.wikia.com'/wiki'/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:'/'/www.balloon-juice.com'/","title":"Balloon Juice"},{"link":"http:'/'/www.balloonfiesta.com'/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:'/'/www.youtube.com'/watch?v=belCJJjut1A","title":"'"The Balloon Show'" for learning colors -- children's educational video"},{"link":"http:'/'/www.google.com'/loon'/","title":"Loon for All 'u2013 Project Loon 'u2013 Google"},{"link":"http:'/'/www.youtube.com'/watch?v=khsXGETCqVw","title":"'"Pretty Balloons'" (balloon song for learning colors) - YouTube"},{"link":"http:'/'/www.balloon-app.com'/","title":"Balloon"}]
使用以下代码。检查工作的DEMO
var list = [{"link":"http:'/'/en.wikipedia.org'/wiki'/Balloon","title":"Balloon - Wikipedia, the free encyclopedia"},{"link":"http:'/'/www.balloons.com'/","title":"Balloons.com - Wholesale Balloon Distributor"},{"link":"http:'/'/www.partycity.com'/category'/balloons.do","title":"Party Balloons, Helium Balloons & Balloon Accessories - Party City"},{"link":"http:'/'/clashofclans.wikia.com'/wiki'/Balloon","title":"Balloon - Clash of Clans Wiki"},{"link":"http:'/'/www.balloon-juice.com'/","title":"Balloon Juice"},{"link":"http:'/'/www.balloonfiesta.com'/","title":"The Albuquerque International Balloon Fiesta - Welcome to the ..."},{"link":"http:'/'/www.youtube.com'/watch?v=belCJJjut1A","title":"'"The Balloon Show'" for learning colors -- children's educational video"},{"link":"http:'/'/www.google.com'/loon'/","title":"Loon for All 'u2013 Project Loon 'u2013 Google"},{"link":"http:'/'/www.youtube.com'/watch?v=khsXGETCqVw","title":"'"Pretty Balloons'" (balloon song for learning colors) - YouTube"},{"link":"http:'/'/www.balloon-app.com'/","title":"Balloon"}]
function DisplayListItems(list) {
$.each(list, function(index, element) {
var itemHTML = ["<li>",
"<div>",
"<div>",
element.link,
"</div>",
"<div>",
element.title,
"</div>",
"</div>",
"</li>"].join(''n');
$(".list > ul").append(itemHTML);
});
}
DisplayListItems(list)
jQuery.parseJSON是一个以字符串作为输入并提供Javascript对象/数组作为输出的函数。示例：
var obj = jQuery.parseJSON(list["json"]);
console.log(obj);
因此，在迭代列表之前，您应该调用列表中的parseJSON
.list > ul
是一个选择器，用通俗易懂的语言可以读作：
所有的ul元素，恰好是任何元素的子元素，其具有列表的类别。
简单地说，选择器是逻辑推理，它决定在给定的情况下应该选择哪些元素。