javascript - 使用 Javascript 将 html 数据存储在列表中

Question

我正在使用 javascript 创建一个 Web 应用程序，其中有如下数据：

<h2>Data 1</h2>

<span>More: Data 1</span>
<span>Data 1</span>
<span>Data 1</span>
<span>Data 1</span>

<h2>Data 2</h2>

<span>More: Data 2</span>
<span>Data 2</span>
<span>Data 2</span>
<span>Data 2</span>

<h2>Data 3</h2>

<span>More: Data 3</span>
<span>Data 3</span>
<span>Data 3</span>
<span>Data 3</span>

现在，我想像这样存储数据

[
    {'title':'data1', 'More':'data1'},
    {'title':'data2', 'More':'data2'},
    {'title':'data3', 'More':'data3'}
]

我不确定这是否可能。如果是，我该如何实现？

标签： javascriptlist

Answer 1

希望这是你想要的。

let result = []
$("h2").each(function(index, element) {
  result.push({
    title: $(element).html().replace(' ', '').toLowerCase(),
    More: $(element).next("span").html().replace('More: ', '').replace(' ', '').toLowerCase(),
  })
})
console.log((result))

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

<span>More: Data 1</span>
<span>Data 1</span>
<span>Data 1</span>
<span>Data 1</span>

<h2>Data 2</h2>

<span>More: Data 2</span>
<span>Data 2</span>
<span>Data 2</span>
<span>Data 2</span>

<h2>Data 3</h2>

<span>More: Data 3</span>
<span>Data 3</span>
<span>Data 3</span>
<span>Data 3</span>