使用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'}
]

我不确定是否有可能。如果是的话，我该如何实现呢？

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>

Answer 2

可能是你可以使用嵌套列表

<hX>title</hX>
<ul>
    <li>data1</li>
    <ul>More</ul>
    <li>data1</li>
</ul>


<hX>title</hX>
<ul>
    <li>data2</li>
    <ul>More</ul>
    <li>data2</li>
</ul>