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

Question

我有以下 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 标签中的所有元素。

Answer 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>

Answer 2

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>