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

Question

我想用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';
});

请帮帮我。谢谢。

Answer 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>

Answer 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>