使用 jQuery 动态创建对象

Posted 2023-05-09

【中文标题】使用 jQuery 动态创建对象

【英文标题】：Dynamically create object with jQuery

【发布时间】：2018-07-14 17:58:51

【问题描述】：

我想动态创建一个对象数组。

该数组将被称为“组”。它将包含未知数量的对象（这些是组名称），这些对象将由元素的ID 确定。每个对象将包含未知数量的属性（这些是组属性），这些属性将由 div 的内部文本确定，它们的值将由另一个 div 的内部文本确定。

我知道如何使用.each() 和.attr('ID') 和.text() 获取这些值。我只是不知道如何创建对象数组。

// Example html 
<div id="england">
    <div class="property">health</div>
    <div class="count">3</div>
    <div class="property">education</div>
    <div class="count">1</div>
    <div class="property">entertainment</div>
    <div class="count">12</div>
</div>
<div id="scotland">
    <div class="property">geography</div>
    <div class="count">5</div>
    <div class="property">history</div>
    <div class="count">2</div>
</div>
<div id="wales">
    <div class="property">illustration</div>
    <div class="count">4</div>
    <div class="property">business</div>
    <div class="count">6</div>
    <div class="property">fashion</div>
    <div class="count">3</div>
</div>

.

// Example JSON output of the 'groups' array
  
    "england":  
        "health":"3",
        "education":"1",
        "entertainment":"12"
    ,
    "scotland":  
        "geography":"5",
        "history":"2"
    ,
    "wales":  
        "illustration":"4",
        "business":"6",
        "fashion":"3"
    

【问题讨论】：

如果你想从 html 创建这个发布你的 html。

...如果你想要js输出，你的输出应该是js。

我很快就会用一些示例 HTML 进行编辑。

您能否还展示一个对象数组的示例，因为上面看起来不像我知道的任何 javascript 数组..

您可能想要初始化您的 Group 数组，然后您需要选择您需要的 HTML 内容。之后，您将需要使用一些数组方法以您希望在 Group 对象中的方式获取选定的 HTML 内容。请查看 .map() 、 .forEach() 、传播运算符等的文档以查看示例

【参考方案1】：

您可以使用reduce() 来返回对象，使用Array.from 将jQuery 对象转换为对象数组，这样您就可以使用reduce 方法。

// Select direct div children of body, make an array from them and use reduce on it
const data = Array.from($('body > div')).reduce(function(r, e) 
  // Add property for each div / object in array where key is id and value will be another object from array of children of current div 
  r.groups[e.id] = Array.from($(e).children())
    .reduce(function(acc, el, i, arr) 
      // Here we are looping each element in div and if (i % 2 == 0) that means its property so we will use it for key and the next one will be used for value
      if (i % 2 == 0) acc[el.textContent] = arr[i + 1].textContent
      // return accumulator
      return acc
    , )
  // return accumulator
  return r;
  // Accumulator of first reduce is object with groups property
, groups: )

console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="england">
  <div class="property">health</div>
  <div class="count">3</div>
  <div class="property">education</div>
  <div class="count">1</div>
  <div class="property">entertainment</div>
  <div class="count">12</div>
</div>
<div id="scotland">
  <div class="property">geography</div>
  <div class="count">5</div>
  <div class="property">history</div>
  <div class="count">2</div>
</div>
<div id="wales">
  <div class="property">illustration</div>
  <div class="count">4</div>
  <div class="property">business</div>
  <div class="count">6</div>
  <div class="property">fashion</div>
  <div class="count">3</div>
</div>

【讨论】：

哇。谢谢 Nenad，这看起来很有效。那里有很多我不认识的（因此不理解）。您能否对每行的功能进行一些解释？那将不胜感激！

刚刚意识到我从来没有感谢你加入 cmets - 真的很感激 :)