循环遍历每个 li 并使用 javascript / jQuery 将值存储到多维数组中答案

【问题标题】：loop through each li and store values into multidimensional array using javascript / jQuery循环遍历每个 li 并使用 javascript / jQuery 将值存储到多维数组中
【发布时间】：2022-02-02 22:20:58
【问题描述】：

我有一个 HTML 列表。我想遍历每个li 并将文本存储在一个数组中。我的最终数组应如下所示：

[{
  text: ["country", "city", "poste code", "address", "name", "surname", "email", "tel number"],
  textwithBrackets: ["[country]", "[city]", "[poste code]", "[address]", "[name]", "[surname]", "[email]", "[tel number]"]
}]

我所做的是：

1- 使用map 遍历每个li 并将文本返回到array 1

2- 执行与第一步相同的步骤，但将带有括号的每个文本返回到 array 2

3- 创建一个最终的array 并通过键/值同时推送array 1 和array 2

下面是我的代码。它正在工作，但是我不知道使用 jQuery 是否有更好的解决方案？例如，我怎样才能在一个步骤中同时进行映射并直接将合并分配到最终数组中？

非常感谢您的建议。

var liText = $('ul > li').map(function(){ return $(this).text(); }).get();

var liTextwithBrackets = $('ul > li').map(function(){ return '[' + $(this).text() + ']'; }).get();


var result = [];
result.push({
  text: liText, 
  textwithBrackets: liTextwithBrackets });
        
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>country</li>
  <li>city</li>
  <li>poste code</li>
  <li>address</li>
  <li>name</li>
  <li>surname</li>
  <li>email</li>
  <li>tel number</li>
</ul>

【问题讨论】：

读取 DOM 相对慢。所以你可以运行第一个映射，然后在第一个数组上使用 map 来生成第二个（而不是重新读取 ul>li .text）

标签： javascript html jquery arrays

【解决方案1】：

请试试这个。它比你的方法有点性能。

var liText = $('ul > li').map(function() {return $(this).text();}).get();
var result = [{
  text: liText,
  textwithBrackets: liText.map(val => '[' + val + ']')
}];

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>country</li>
  <li>city</li>
  <li>poste code</li>
  <li>address</li>
  <li>name</li>
  <li>surname</li>
  <li>email</li>
  <li>tel number</li>
</ul>

【讨论】：

非常感谢:)