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

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>，您可以使用以下组合：

1. ：包含

2. ：下一个

3. 孩子们

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);

// or

console.log(h3.nextElementSibling.children)

<div class="account-type">

  <h3>Assets</h3>

  <ul></ul>

</div>

<div class="account-type">

  <h3>Liabilities</h3>

  <ul>

    <li>a</li>

    <li>b</li>

  </ul>

</div>