JQuery 使用高级选择器执行以下任务的代码。 PS:children() 不工作

JQuery code to perform the following task using advanced selectors. PS : cihldren() not workin

我们如何才能只显示前 2 个列表项,以及如何将

标签下的子项的背景颜色设置为绿色。 只能使用 JQUERY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Selectors</title>
    <script type="text/javascript" src="jquery-3.5.0.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <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>
</body>
</html>

我的JQuery代码不工作

$(document).ready(()=>{
   //Code to make children of P to green 
   $("p").children().css('background-color:green');
   //Code to display only first 2 items of list

})

只是提一下为什么您的代码不起作用是因为首先您不能在 p 标签中包含 h6 标签。

其次你写道:

$("p").children().css('background-color:green');

最好像这样遍历每个子项(请注意,您在 css()- 函数中写错了值):

$("#intro").children().each(function(){
  $(this).css("background-color", "green");
});

如果只显示两个列表项,您可以这样做:

$("ol").children().each(function() {
index = $(this).index();
if (index > 1) {
  $(this).hide();
}

JsFiddle:https://jsfiddle.net/boe2sdyk/