JQuery：如何从 div 中提取 li 项

Question

我有以下 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 达到这个目标吗？

Answer 1

您可以 select 使用 Next Siblings Selector (~)

在另一个元素之后的元素

您也可以使用 .nextAll() 来实现同样的效果 - $('#myDiv script').nextAll('li')

我还在返回的元素上使用了 .clone() to safely use .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>

Answer 2

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

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

JQuery：如何从 div 中提取 li 项

JQuery: How to extract li items from div

jquery

html

jquery-selectors