JQuery:如何从div中提取li项
JQuery:如何从div中提取li项
提问于 2019-12-27 20:13:32
我有以下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>项目相对应的超文本标记语言：
<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实现这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-27 20:21:22
可以使用Next Siblings Selector (~)选择另一个元素后面的元素
您也可以使用.nextAll()来实现相同的功能- $('#myDiv script').nextAll('li')
我还使用了.clone()在返回的元素上安全地使用.wrapAll('')，而不影响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>
Stack Overflow用户
发布于 2019-12-27 20:23:18
假设您想要最新列表项的内容：
$("#myDiv ul li:last").text()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59500680
复制相关文章
相似问题
腾讯云开发者
