使用高级选择器执行以下任务的 JQuery 代码。 PS：儿童（）不工作
Posted
技术标签:
【中文标题】使用高级选择器执行以下任务的 JQuery 代码。 PS：儿童（）不工作【英文标题】：JQuery code to perform the following task using advanced selectors. PS : cihldren() not workin 【发布时间】：2020-10-01 02:42:33 【问题描述】：我们怎样才能只显示前 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
)
【问题讨论】：
【参考方案1】：只是提到为什么您的代码不起作用是因为首先您不能在 p-tag 中包含 h6-tag。
其次你写道：
$("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/
【讨论】：
嘿，感谢您的快速帮助。欣赏它。列表被隐藏。但是背景代码仍然无法正常工作。它适用于 DIV 标签，但不适用于标签
@ROHITKF 没问题。那是因为你不能在 p-tag 中有 h6 标签。 哦，好的。难怪它为什么不起作用。非常感谢您的帮助以上是关于使用高级选择器执行以下任务的 JQuery 代码。 PS：儿童（）不工作的主要内容，如果未能解决你的问题，请参考以下文章
HTML5中类jQuery选择器querySelector的高级使用
通过 :not 在 jQuery 选择器中隐藏除 $(this) 之外的所有内容