用Div内容创建obj

Create obj out of Div contents

本文关键字：创建 obj Div      更新时间：2023-09-26

我有以下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)

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

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

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

Fiddle。

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

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"]}"

工作示例

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

还需要注意的是，您不需要以JSON格式传递对象即可实现这一点——您可以直接向AJAX请求的data参数提供一个对象，jQuery将自动为您对其进行编码和字符串化。

相关文章：