如何使用jquery将LI的项转换为json对象？

Question

如果我有如下列表:

<ul class="nameList">
    <li value="1">Bob</li>
    <li value="2">Frank</li>
    <li value="3">Sally</li>
</ul>

如何将其转换为json对象,如下所示:

[{"id":"1","title":"Bob"},{"id":"2","title":"Frank"},{"id":"3","title": "坦率"}]

我需要将该数据转换为该格式,以便我可以通过$ .post()调用将其传递回我的php服务器.

有人能告诉我如何从该列表中获取项目并使用jQuery将它们转换为上面的json吗？

Answer 1

jQuery实际上有内置的用于构建数组的东西:map()

var items = $('.nameList').find('li').map(function() {
  var item = { };

  item.id = this.value;
  item.title = $(this).text();

  return item;
});

这将构建一个与您之后的JSON结构匹配的对象数组.然后,对于JSON序列化,使用JSON.stringify,它包含在较新的浏览器中,并通过包含json2.js可用于较旧的浏览器:

// Produces [{'id':1,'title':'bob'},{etc},{etc}]
var json = JSON.stringify(items);

另请注意,$ .post()会自动序列化对象数据参数,如key1 = value1&key2 = value2&etc.除非您在服务器端严格需要JSON,否则可能不需要JSON序列化步骤.

Answer 2

var items = [];

$('ul.nameList').children().each(function() {
  var $this = $(this);
  var item = { id: $this.attr('value'), title: $this.html() };
  items.push(item);
});