2012-03-29 31 views
5

Nếu tôi có các yếu tố DOM sautạo json từ các yếu tố DOM sử dụng jQuery

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

như thế nào, sử dụng jQuery và Javascript, để tôi xây dựng một đối tượng JSON như sau?

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

Bất kỳ đề xuất nào được đọc thêm?

+0

Tại sao bạn muốn làm điều này? Đôi khi biểu diễn tốt nhất của dữ liệu là chính dữ liệu. –

+0

Cân nhắc giữ dữ liệu của bạn trong mô hình MVC, không phải DOM ... –

+0

Tôi đang cố gắng tạo bảng JSON giống như được sử dụng tại đây: http://links.sourceforge.net/timeline/js/examples/example17_json_data.html Nhưng thay vì viết html trong đối tượng json trực tiếp, tôi muốn viết html trong DOM và _then_ xây dựng đối tượng json. Đây có phải là cách tốt nhất để đi về nó? – bento

Trả lời

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

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

+0

Tốt. Thành tích của việc làm theo cách này bằng cách sử dụng .each() là gì? – bento

+0

'.map' sẽ trả về cho bạn một mảng, thay vì phải tạo một mảng trước. –

+0

Điều cần biết. Cảm ơn. – bento

0

Bạn có thể lặp qua các div mục và thêm đối tượng vào một mảng.

var items = new Array(); 

$("div.item").each(function() { 
    var item = {classname: this.className, content: $(this).text()}; 
    items.push(item); 
}); 
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>'); 
});​ 

câu trả lời đúng:

http://jsfiddle.net/tS9r5/

var datas = []; 

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

console.log(datas); 

+0

up, tôi đã làm ngược lại. –

+0

tuyệt vời! cảm ơn. Thật tốt khi biết cách đi cả hai cách. – bento

Các vấn đề liên quan