Get element after a specific sibling element by the sibling's text

Question

I have the following html code:

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

How do I isolate the div tag with the class of "account-type" that is the direct parent of the h3 tag with the text "Liabilities"? I need to isolate it and then loop through all of the elements in it's ul tags.

Answer 1

Assuming <ul> should come after <h3> , you can use this combination:

1. :contains
2. :next
3. children

 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

There is no text match in DOM so need to select all the elements, look to see if the text matches. If it does select the parent.

 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>