我有以下 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 标签中的所有元素。
1 回答
明月笑刀无情
TA贡献1828条经验 获得超4个赞
假设<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>
人到中年有点甜
TA贡献1895条经验 获得超7个赞
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>
添加回答
举报
0/150
提交
取消