通过同级文本获取特定同级元素之后的元素

我有以下 html 代码:


<div class="account-type">

   <h3>Assets</h3>

   <ul> ...lots of data in here... </ul>

<div class="account-type">

   <h3>Liabilities</h3>

   <ul> .... lots of elements in here... </ul>

如何将 div 标签与“account-type”类隔离,该“account-type”类是带有文本“Liability”的 h3 标签的直接父级?我需要隔离它,然后循环遍历它的 ul 标签中的所有元素。


慕后森
浏览 118回答 1
1回答

明月笑刀无情

假设<ul>应该在 之后<h3>,您可以使用以下组合::包含:下一个孩子们function getItemByTitle( title ){  return $(`h3:contains("${title}")`).next('ul').children()}var listItems = getItemByTitle("Liabilities")console.log(listItems.length)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="account-type">   <h3>Assets</h3>   <ul></ul></div><div class="account-type">   <h3>Liabilities</h3>   <ul>    <li>1</li>    <li>2</li>   </ul></div>

人到中年有点甜

DOM 中没有文本匹配,因此需要选择所有元素,查看文本是否匹配。如果它确实选择了父级。const h3 = Array.from(document.querySelectorAll(".account-type > h3")).find(elem => elem.textContent.trim() === 'Liabilities');console.log(h3)const div = h3.closest(".account-type");console.log(div);const lis = div.querySelectorAll("ul li");console.log(lis.length);// orconsole.log(h3.nextElementSibling.children)<div class="account-type">&nbsp; <h3>Assets</h3>&nbsp; <ul></ul></div><div class="account-type">&nbsp; <h3>Liabilities</h3>&nbsp; <ul>&nbsp; &nbsp; <li>a</li>&nbsp; &nbsp; <li>b</li>&nbsp; </ul></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript