我希望将 代码: null null标记的所有子项的背景色更改为绿色。 但是我写的代码不管用。 但是如果我将标记更改为，它就可以工作了。 但是我需要它使用jQuery高级选择器来处理
标记$(document).ready(() => {
//Change background color of children to green
//Below code is not working
$("#intro").children().each(function() {
$(this).css("background-color", "green");
});
//Show only first 2 list item
$('ol li').hide().slice(0, 2).show();
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<p id="intro">jQuery is a lightweight, "write less, do more" JavaScript library.
<h6>The purpose of jQuery is to make it much easier to use JavaScript on your website</h6>
</p>
<ol>
<li>HTML/DOM manipulation</li>
<li>CSS manipulation</li>
<li>Effects and animations</li>
<li>AJAX</li>
</ol>
h不是p的有效子级
P段
段落是块级元素，特别是如果在结束
允许的内容:措辞内容
呈现的HTML变为
<p id="intro">jQuery is a lightweight, "write less, do more" JavaScript library.
</p><!-- inserted by browser -->
<h6>The purpose of jQuery is to make it much easier to use JavaScript on your website</h6>
<p><!-- inserted by browser -->
</p>
您可以这样做:
null
$(document).ready(() => {
//Change background color of children to green
//Below code is now working
$("#intro").children().each(function() {
$(this).css("background-color", "green");
$('<br />').insertBefore(this); // because of the inline-block
});
//Show only first 2 list item
$('ol li').hide().slice(0, 2).show();
}).h6 {
display: inline-block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<p id="intro">jQuery is a lightweight, "write less, do more" JavaScript library.
<span class="h6">The purpose of jQuery is to make it much easier to use JavaScript on your website</span>
</p>
<ol>
<li>HTML/DOM manipulation</li>
<li>CSS manipulation</li>
<li>Effects and animations</li>
<li>AJAX</li>
</ol>