如何在 <ul> 标签中显示 <p> 标签？

Question

我有一个 <ul> 标签，其中包含 2 个 <li> 标签和一个包含文本的 <p> 标签：

<ul>
    <li>List-item-1<p>para-1</p></li>
    <li>List-item-2<p>para-2</p></li>
</ul>

我想从代码中删除 List-item-1 和 List-item-2。我试过这个：

$('li').each(function () {
    $('li').html($('p'));
});

但我得到输出如下：

第 1 段

第 2 段

第 1 段

第 2 段

第 1 段

第 2 段

第 1 段

第 2 段

如何获得仅带有 <p> 标签的输出？

Answer 1

您可以在这里使用find()功能。

$('ul li').html(function(){
  return $(this).find('p');
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<ul>
    <li>List-item-1<p>para-1</p></li>
    <li>List-item-2<p>para-2</p></li>
</ul>

Answer 2

即使没有 jQuery，您也可以替换 innerText。

document.querySelectorAll('li').forEach(li => {
  li.innerText = li.querySelector('p').innerText
})

<ul>
    <li>List-item-1<p>para-1</p></li>
    <li>List-item-2<p>para-2</p></li>
</ul>

Answer 3

您也可以删除文本。

$('ul li').each((i,ele) => {
  ele.firstChild.remove()
})

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<ul>
  <li>List-item-1
    <p>para-1</p>
  </li>
  <li>List-item-2
    <p>para-2</p>
  </li>
</ul>

如何在 <ul> 标签中显示 <p> 标签？

How to show <p> tag in <ul> tag?

html

javascript

css

jquery