英文:
Add styling only to elements with a child
问题
我有多个具有相同类名的<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">
测试 1
</p>
<p class="parent">
测试 2
<span class="child">
测试
</span>
</p>
<p class="parent">
测试 3
</p>
<p class="parent">
测试 4
</p>
英文:
I have multiple <p> with the same class names, and only one has a child. I'm trying to only highlight the <p> that has a child, but my code highlights all of them.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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";
}
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 2
以下是您要翻译的内容：
在最近的浏览器中，您可以使用单个选择器字符串来实现这一点 - 选择具有子元素 :has(> .child) 的 .parent。
for (const p of document.querySelectorAll('.parent:has(> .child)')) {
p.style.backgroundColor = "yellow";
}
否则，按照您当前的代码，您将不得不引用正在迭代的元素（highlight[i]），并在其上调用 querySelector 以查看该元素是否具有任何匹配的子元素。
window.onload = function() {
var highlight = document.getElementsByClassName('parent');
for (let i = 0; i < highlight.length; i++) {
if (highlight[i].querySelector(".parent .child")) {
highlight[i].style.backgroundColor = "yellow";
}
}
}
希望这有所帮助。如果您有其他问题，请随时提出。
英文:
In recent browsers, you can do this with a single selector string - select .parents which have a child with :has(> .child).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
for (const p of document.querySelectorAll('.parent:has(> .child)')) {
p.style.backgroundColor = "yellow";
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Otherwise, going with your curent code, you'll have to reference the element being iterated over (the highlight[i]), and call querySelector on it to see if that one element has any matching children.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.onload = function() {
var highlight = document.getElementsByClassName('parent');
for (let i = 0; i < highlight.length; i++) {
if (highlight[i].querySelector(".parent .child")) {
highlight[i].style.backgroundColor = "yellow";
}
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
我不会在这里使用JavaScript，只需使用has选择器
p:has(span) {
background-color:#f00!important
}
英文:
I wouldn't use javascript for this
just use the has selector
p:has(span) {
background-color:#f00!important
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论