我有多个类名相同的<p>，但只有一个有一个孩子，我试图只突出显示有一个孩子的<p>，但我的代码突出显示了所有的<p>。
window.onload = function() {
var highlight = document.getElementsByClassName('parent');
for (let i = 0; i < highlight.length; i++) {
if (document.querySelectorAll(".parent .child").length > 0) {
highlight[i].style.backgroundColor = "yellow";
}
}
}<p class="parent">
Testing 1
</p>
<p class="parent">
Testing 2
<span class="child">
test
</span>
</p>
<p class="parent">
Test 3
</p>
<p class="parent">
Testing 4
</p>
2条答案
按热度按时间yuvru6vn1#
在最近的浏览器中，你可以用一个选择器字符串来完成这个操作--选择
.parents，它有一个:has(> .child)的子元素。否则，按照当前的代码，必须引用正在迭代的元素（
highlight[i]），并在其上调用querySelector，以查看该元素是否有任何匹配的子元素。一个二个一个一个
jq6vz3qz2#
我不会使用javascript来实现这个功能，只需要使用has选择器即可