jQuery筛选器children()案例详解(图文)
jQuery的选择包含两种，一种是选择器，一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。
children()是一个筛选器，顾名思义就是筛选孩子，筛选那些符合条件的孩子。
.children(expr)
其中children是筛选器的名称，expr是表达式，所有选择器中的表达式都可以用在这，比如按标签名"div",按类名".class",按序号":first"等等，如果表达式为空，那么返回的是所有的孩子，返回的结果仍为jQuery对象。例如：
代码如下:
<body>
<div id="main">
<div id="like" class="rightbar">
<h2>猜你喜欢</h2>
<ul>
<li>海飞丝洗头膏</li>
<li>六神花露水</li>
<li>舒肤佳香皂</li>
<li>心相印纸巾</li>
<li>哇哈哈矿泉水</li>
<li>王老吉</li>
</ul>
</div>
<div id="hot" class="rightbar">
<h2>热门推荐</h2>
<ul>
<li>融氏橄榄油</li>
<li>帮宝适纸尿裤</li>
<li>有机大米</li>
<li>妙洁垃圾袋</li>
<li>优乐美奶茶</li>
<li>亲亲果冻</li>
</ul>
</div>
<div id="inner"></div>
</div>
</body>
<script type="text/javascript" language="javascript">
//此处为jQuery代码
</script>
$("div").children().css("color","red");//所有的文字都变成了红色
需求2：把所有的div的孩子中是h2标签的字体颜色变为红色
代码如下:
$("div").children("h2").css("color","red");//所有h2标题的文字都变成了红色
需求3：把所有div的孩子中是li标签的字体颜色变为红色
代码如下:
$("div").children("li").css("color","red");//失败！
为什么不成功呢？因为children只能找孩子，找不到孙子辈的，而div的孩子是h2和ul，所以找不到li；
那么要想通过children找到li，只有先选定li的父亲ul
代码如下:
$("div ul").children("li").css("color","red");//所有li的文字都变成了红色
$("div ul")是一个联级选择器，意思是选择div下面的ul，这里不详细解释。
$("div ul").children(":eq(1)").css("color","red");//猜你喜欢的第二行“六神花露水”会变红
要第二个孩子变红，为什么是eq(1)呢？因为顺序号是从0开始的，第一个孩子的序号是0，所以第二个孩子的序号就是1咯。
细一看发现只有“猜你喜欢”模块的第二行变了，“热门推荐”的第二行没变，为什么呢？因为children筛选器筛选出来的孩子是在一块排序的，所以“热门推荐”的第二行就变成了老7，要想变红可以这么写：
代码如下:
$("div ul").children(":eq(1),:eq(7)").css("color","red");//猜你喜欢的第二行，热门推荐的第二行都变红
二行都变红]
总结一下：children是一个筛选器，找到当前jQuery对象的孩子，children(expr)中的expr是表达式，加了expr之后符合expr的孩子才会留下来，不符合的就干掉了。children只能找孩子，要想找孙子辈的、重孙子辈的，那就得用 find 筛选器。
相关推荐
-
Angularjs实现带查找筛选功能的select下拉框示例代码
前言 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!所以为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析 我们的目标是在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的select的功
-
js实现表格筛选功能
本应用就两个主要实现: 1.表格的id 和 class之间的命名关系 请看图: 将组名和个人信息联表格联系起来,这样会很好的操作表格 HTML代码: <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr> <tr class="child_row_01"><td>张三</td>
-
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
-
angular实现商品筛选功能
一.demo功能分析 1.通过service()创建数据并遍历渲染到页面 2.根据输入框的输入值进行字段查询 3.点击各列实现排序功能. 二.实现 1.1 数据定义与渲染 angular更偏向于是一个MVVM模式的框架,所以它的controller很薄,里面的业务逻辑也是少的,因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中.此次demo通过angular的service方法来注册并定义商品数据. angular.module("app"
-
iOS仿Uber筛选栏效果
这个是之前项目中用的仿Uber筛选栏,现在要改了,改之前把这个记录下来,万一有人用到了,就可以直接拿来用了,这个是在大神的基础上改的,还行吧,但是觉得有点丑!有需要的可以看一下,方法有点笨,大神勿喷. 1.加载数据 * 加载数据 */ - (void)loadData{ timeArray = @[@"6小时之内",@"12小时之内",@"24小时之内"]; locationArray = @[@"全城",@"附近1
-
JQuery筛选器全系列介绍
1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹配元素.例如:$(".style1");·* 匹配所有元素.例如:$("*")·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回.例如:$("#id,div,.style1"
-
jquery遍历数组与筛选数组的方法
grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置为字符串时,将视为"lambda-form"(缩写形式?),其中 a 代表数组元素,i 代表元素索引值.如"a > 0"代表"f
-
AngularJs页面筛选标签小功能
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
-
jquery遍历筛选数组的几种方法和遍历解析json对象
jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera
-
angularjs 实现带查找筛选功能的select下拉框实例
一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析: 目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele