代码之家 › 专栏 › 技术社区 › Ibrahim Shaikh

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

list javascript

-2

Ibrahim Shaikh · 技术社区 · 7 年前

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

我不确定是否有可能。如果是的话,我怎么能做到呢?

1 回复 | 直到 7 年前

1

holydragon 7 年前

希望这是你想要的。

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>

2

0

Akshay Mulgavkar 7 年前

可能您可以使用嵌套列表

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