使用 jQuery 从 DOM 元素创建 json

Posted 2023-05-09

【中文标题】使用 jQuery 从 DOM 元素创建 json

【英文标题】：creating json from DOM elements using jQuery

【发布时间】：2012-04-13 12:26:40

【问题描述】：

如果我有以下 DOM 元素

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

如何使用 jQuery 和 javascript 构造如下所示的 JSON 对象？

[ 
'classname': 'item',
'content': 'content1'


'classname': 'item',
'content': 'content2'
]

有推荐的进一步阅读吗？

【问题讨论】：

为什么要这样做？有时，数据的最佳表现形式就是数据本身。

考虑将数据保存在 MVC 模型中，而不是 DOM...

我正在尝试构建一个像这里使用的那样的 JSON 表：links.sourceforge.net/timeline/js/examples/… 但不是直接在 json 对象中编写 html，而是想在 DOM 中编写 html，并且 然后构造json对象。这是最好的方法吗？

这是他在示例中使用的对象，但是这样编写html似乎很乱。 ta = [ 'start': new Date(2010,7,23), 'content': 'Conversation' ,

【参考方案1】：

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

演示：http://jsfiddle.net/nDE7e/

【讨论】：

不错。这样做比使用 .each() 有什么好处？

.map 将返回一个数组，而不必事先创建一个。

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

@aschuler：.get() 在那里，因此您返回了一个数组。否则，您将返回一个 jQuery 对象。

【参考方案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);

​

​

【参考方案3】：

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

var items = new Array();

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