我如何找到子级元素没有找到孙子元素与querySelectorAll?

Question

从<ul id="tree_view">开始

<ul id="tree_view">
<li>
<span class="box">Node 1</span>
<!-- recursive template -->
<ul>
<li class="nested">
<span class="box">Leaf 1</span>
<!-- recursive template -->
<ul>
<li class="nested">
<span class="non-box">Leaf 1-1</span>
<!-- recursive template -->
</li>
</ul>
</li>
<li class="nested">
<span class="non-box">Leaf 2</span>
<!-- recursive template -->
</li>
</ul>
</li>
<li>
<span class="box">Node 2</span>
<!-- recursive template -->
<ul>
<li class="nested">
<span class="non-box">Leaf 3</span>
<!-- recursive template -->
</li>
<li class="nested">
<span class="non-box">Leaf 4</span>
<!-- recursive template -->
</li>
</ul>
</li>
</ul>

我试图找到<li class="nested">，容器"叶子1"one_answers"叶子2"，但不包括一个容器"叶子1-1"。任何建议吗?

我尝试了多种方法，它总是找到所有的子和孙子元素与匹配类嵌套。我试过:* > * > * > .nested.

我找到了解决方案，使用"节点1"示例:

var boxValue = "Node 1";    
const elements = this.parentElement.querySelectorAll("* > * > .nested");

elements.forEach(element => {
const parentBox = element.parentElement.parentElement.querySelector(".box");

if (parentBox.textContent == boxValue) {
//found!!
}
});

Answer 1

由于没有人发表任何进一步的解决方案，我将总结如下:

var boxValue = "Node 1";    
const elements = this.parentElement.querySelectorAll("* > * > .nested");

elements.forEach(element => {
const parentBox = element.parentElement.parentElement.querySelector(".box");

if (parentBox.textContent == boxValue) {
//found!!
}
});