使用 jQuery 从 DOM 元素创建 JSON

Question

如果我有以下的DOM元素：

<div class="item">content1</div>
<div class="item">content2</div>

如何使用jQuery和Javascript构建以下JSON对象？

[{ 
'classname': 'item',
'content': 'content1'
}
{
'classname': 'item',
'content': 'content2'
}]

有什么推荐的进一步阅读材料吗？

- bento

---

为什么你想要这样做？有时候最好的数据表示就是数据本身。 - Diodeus - James MacFarlane

考虑将数据存储在MVC模型中，而不是DOM中... - Šime Vidas

我正在尝试构建一个类似于此处使用的JSON表格：http://links.sourceforge.net/timeline/js/examples/example17_json_data.html 但是，我想在DOM中编写html，而不是直接在json对象中编写html，然后再构建json对象。这是最好的方法吗？ - bento

这是他在示例中使用的对象，但将html写成这样似乎有些凌乱。 ta = [ { 'start': new Date(2010,7,23), 'content': '对话<br><img src="img/comments-icon.png" style="width:32px; height:32px;">' }, - bento

Answer 1

var data = $('div.item').map(function(){
    return {
        classname: 'item',
        content: $(this).text()
    };
}).get();

DEMO: http://jsfiddle.net/nDE7e/

- gen_Eric

---

很好。这种方法相比使用.each()有哪些优点？ - bento

.map会返回一个数组，而不需要事先创建一个数组。 - gen_Eric

不错的方法。 看起来你可以摆脱最后一个 .get()。 - Adrien Schuler

@aschuler: 这里的.get()函数是为了返回一个数组，不然你会得到一个jQuery对象。 - gen_Eric

Answer 2

http://jsfiddle.net/24JjD/

var datas = [{ 
    'classname': 'item',
    'content': 'content1'
    }, {
    'classname': 'item',
    'content': 'content2'
    }
];

$.each(datas, function(key, value) {
    $('body').append('<div class="'+value.classname+'">'+value.content+'</div>');
});​

正确答案：

http://jsfiddle.net/tS9r5/

（注：此为原文，无需翻译）

var datas = [];

$('div.item').each(function() {
   var data = { 
       classname: this.className, 
       content: $(this).text()
   };
   datas.push(data);
});

console.log(datas);

​

​

- Adrien Schuler

Answer 3

你可以循环遍历项目div并将对象添加到数组中。

var items = new Array();

$("div.item").each(function() {
   var item = {classname: this.className, content: $(this).text()};
   items.push(item);
});

- jrummell