Хранить HTML-данные в списке, используя Javascript

Question

Я создаю веб-приложение, используя javascript, в котором у меня есть такие данные:

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