Question

如果我有以下DOM元素

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

如何使用jQuery和Javascript构建一个JSON对象，如下所示？

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

是否建议进一步阅读？

Answer 1

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

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

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);

Answer 3

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

var items = new Array();

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

使用jQuery从DOM元素创建json

3 个答案: