如何在 jquery 中创建二维关联数组？

Posted 2023-05-09

【中文标题】如何在 jquery 中创建二维关联数组？

【英文标题】：How create two dimensional associative array in jquery?

【发布时间】：2021-01-22 07:16:46

【问题描述】：

我想用 jQuery 创建二维数组并得到以下结果：

Array(
  [data_name_1] => Array([0] => A, [1] => B)
  [data_name_2] => Array([0] => P, [1] => L) 
  [data_name_3] => Array([0] => K, [1] => M) 
)

html 是

<li data-attr-name="data_name_1">
   <div class="_container_">
       <span>A</span>
       <span>B</span>
   </div>
</li>
<li data-attr-name="data_name_2">
   <div class="_container_">
      <span>P</span>
      <span>L</span>
   </div>
</li>

对于第一个数组，我使用以下代码，但对于第二个数组（测试），我不知道应该如何继续。 jQuery(this).data('attr-name') 创建 data_name_1、data_name_2 和 ...

var object_name = ;
  jQuery('li').each(function()
   object_name[jQuery(this).data('attr-name')] = 'test';
  );

请帮助我。谢谢。

【问题讨论】：

你需要显示你的html，那些A B来自哪里？

@jcubic 我编辑并添加了 HTML。谢谢 可能是我在 jquery 中使用的代码是错误的

【参考方案1】：

您需要做的就是找到所有带有jQuery::find 的span 元素，并使用jQuery::text 从该span 中获取文本。

Map 将遍历您选择的跨度，jQuery::get 将从 jQuery 对象返回字符串数组。

var object_name = ;
$('li').each(function()
  var li = $(this);
  object_name[li.data('attr-name')] = li.find('span').map(function() 
    return $(this).text();
  ).get();
);

console.log(object_name);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li data-attr-name="data_name_1">
   <div class="_container_">
       <span>A</span>
       <span>B</span>
   </div>
</li>
<li data-attr-name="data_name_2">
   <div class="_container_">
      <span>P</span>
      <span>L</span>
   </div>
</li>

【参考方案2】：

您可以直接对元素执行此操作 - 随时使用 reduce 和 map：

var result = $('li').get().reduce( (acc,x) => 
  acc[$(x).data("attr-name")] = $(x).find("span").get().map(s => $(s).text());
  return acc;
,)

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li data-attr-name="data_name_1">
   <div class="_container_">
       <span>A</span>
       <span>B</span>
   </div>
</li>
<li data-attr-name="data_name_2">
   <div class="_container_">
      <span>P</span>
      <span>L</span>
   </div>
</li>