我想生成以下对象:
var ideaBoard = {
"Staff Retreat" : {
"Games" : [
{"title" : "Rockband", "details" : "1hr"},
{"title" : "Texas Hold em", "details" : "30min"}
],
"Talks" : [
{"title" : "The Old You", "details" : "Dr. Smith"}
]
}
}
来自以下 HTML:
<div id="data">
<ul><span class="board-title">Staff Retreat</span>
<li><span class="category-title">Games</span>
<ul>
<li>
<span class="title">Rockband</span>
<span class="details">1hr</span>
</li>
<li>
<span class="title">Texas Hold em</span>
<span class="details">30min</span>
</li>
</ul>
</li>
<li><span class="category-title">Talks</span>
<ul>
<li>
<span class="title">The Old You</span>
<span class="details">Dr. Smith</span>
</li>
</ul>
</li>
</ul>
</div>
我是循环/数组/对象的新手 - 所以我非常感谢您的帮助!
如果有帮助的话,我正在这个项目的其他地方使用 jQuery。
Thanks!
有多种方法。这是一个:
var ideaBoard = {}
$('#data > ul').each(function() {
var data = {}, // board data
title = $(this).find('.board-title').text(); // board title
// find categories
$(this).find('> li > .category-title').each(function() {
var category = $(this).text(), // category title
// we can use map to create the array
var category_data = $(this).next().children('li').map(function() {
var tdata = {};
// each span contains detailed data
$(this).children('span').each(function() {
tdata[this.className] = $(this).text();
});
return tdata;
}).get();
data[category] = category_data;
});
ideaBoard[title] = data;
});
DEMO http://jsfiddle.net/fkling/X8J7J/
如果您更改 HTML 的结构,这很可能会中断。如果你有很多这样的数据,这段代码也可能会很慢。
要了解所使用的方法,请查看jQuery 文档 http://api.jquery.com/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)