Question

我有以下HTML结构：

<div id="main">
  <div id="myDiv1">
    <ul>
      <li>Abc</li>
      <li>Def</li>
    </ul>
  </div>
  <div id="myDiv2">
    <ul>
      <li>Ghi</li>
      <li>Jkl</li>
    </ul>
  </div>
</div>

我现在想要提取一些信息并将它们放入这样的对象中：

var ob = {
        'myDiv1' : [ "Abc", "Def"],
        'myDiv2' : [ "Ghi", "Jkl"]
    };

我的方法非常不方便：

var obj = "{";

$('#main div').each(function() {
  obj += "\"" + $(this).attr('id') + "\" : [";
  $(this).find('li').each(function() {
    obj += "\"" + $(this).text() + "\", ";
  });
  obj = obj.substring(0, obj.length - 2);
  obj += "], ";
});
obj = obj.substring(0, obj.length - 2);
obj += "}";

obj = JSON.parse(obj);
console.log(obj)

结果我得到了一个数组，但不是我需要的结构。

有没有更好的方法来创建结构？

稍后，我想将obj作为参数传递给Ajax调用。

Fiddle

Answer 1

只需直接创建对象，即可使代码更简单。您可以遍历div中的#main元素，然后使用map()创建子li包含的div文本值的数组。试试这个：

var obj = {};
$('#main div').each(function() {
    obj[this.id] = $(this).find('li').map(function() {
        return $(this).text();
    }).get()
});

console.log(JSON.stringify(obj)); // = "{"myDiv1":["Abc","Def"],"myDiv2":["Ghi","Jkl"]}"

Working example

稍后，我想将obj作为Ajax调用中的参数传递。

另请注意，您不需要以JSON格式传递对象来执行此操作 - 您可以直接向AJAX请求的data参数提供对象，jQuery将自动为您编码和字符串化。

从Div内容创建obj

1 个答案: