JQuery：如何从 div 中提取 li 项目

Posted 2023-05-09

【中文标题】JQuery：如何从 div 中提取 li 项目

【英文标题】：JQuery: How to extract li items from div

【发布时间】：2020-04-17 10:04:36

【问题描述】：

我有以下包含无序列表和其他代码的 div：

<div id="myDiv">
    <ul>
       <div id="myInnerDiv">Here is a div</div>
       <li id="oneLi">One li</li>
       <script type="text/javascript">
           // some JS code
       </script>
       <li><span class="li-item">Some content 1</span></li>
       <li><span class="li-item">Some content 2</span></li>
       <li><span class="li-item">Some content 3</span></li>
    </ul>
</div>

我想获取<script>标签后面最新的<li>项对应的html：

<ul>
    <li><span class="li-item">Some content 1</span></li>
    <li><span class="li-item">Some content 2</span></li>
    <li><span class="li-item">Some content 3</span></li>
</ul>

或者只是 li 项：

<li><span class="li-item">Some content 1</span></li>
<li><span class="li-item">Some content 2</span></li>
<li><span class="li-item">Some content 3</span></li>

你知道如何使用 jQuery 实现这一目标吗？

【问题讨论】：

源标记无效。 <div>s 不允许作为 <ul> 元素 (MDN) 的子元素。

【参考方案1】：

您可以使用Next Siblings Selector (~)选择另一个元素之后的元素

您也可以使用.nextAll() 来实现相同的功能 - $('#myDiv script').nextAll('li')

我还使用.clone() 安全地在返回的元素上使用.wrapAll('<ul>') 而不会影响DOM

// Returns a jQuery object containing the three <li> items after script
// Then clone ( to leave DOM as is ) and wrap with <ul>
const $listElements = $('#myDiv script ~ li').clone().wrapAll('<ul>');

// Get HTML of <ul>
const listHTML = $listElements.parent().prop('outerHTML');
console.log(listHTML);

// Get HTML of just <li>
const itemHTML = $listElements.parent().html();
console.log(itemHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <ul>
    <div id=" myInnerDiv ">Here is a div</div>
    <li id="oneLi ">One li</li>
    <script type="text/javascript ">
      // some JS code
    </script>
    <li><span class="li-item ">Some content 1</span></li>
    <li><span class="li-item ">Some content 2</span></li>
    <li><span class="li-item ">Some content 3</span></li>
  </ul>
</div>

【讨论】：

请注意，jQuery 将其称为Next Siblings Selector，实际上这听起来比 CSS 名称准确得多。

啊，谢谢！我会开始提到它，因为是的，它更有意义

如果添加.wrapAll("<ul>")，结果正是 OP 想要的

如何在不更新页面的情况下包装所选内容？我在想 .clone() 但不确定这是否是最好的方法

谢谢！无论如何，您也可以将第一个解决方案留在您的回答中。

【参考方案2】：

假设你想要最新列表项的内容：

$("#myDiv ul li:last").text()

【讨论】：

"我要获取

@freedomn-m 显示为“预期输出”的标记足够清晰。 OP 想要在 <script> 元素之后的“最后一个”/三个 <li> 元素。