creating json from DOM elements using jQuery

Question

If I have the following DOM elements

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

how, using jQuery and Javascript, do I construct a JSON object like the following?

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

Any recommended further reading?

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>');
});​

Correct answer :

http://jsfiddle.net/tS9r5/

var datas = [];

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

console.log(datas);

​

​