jquery获得子元素个数_jquery搜索子元素个数

发布时间:2020-07-13编辑:脚本学堂
本文介绍了jquery获得子元素个数的方法,jquery中children()方法的用法,并介绍了jquery搜索子元素的方法,jquery统计指定子元素数量,供大家学习参考。

一、jquery获得子元素个数

例子:
 

//获取id=div1下的子元素的个数
$('#div1').children().length;
//获取id=div1下的span元素个数
$('#div1').children('span').length;

二、jquery统计指定子元素数量

jQuery统计指定子元素数量的方法,涉及jQuery可以通过>访问子标签的技巧

jQuery可以通过 > 访问子标签,然后通过size获得子标签的数量。

例子:
 

复制代码 代码示例:
<div id="foo">
 <div id="bar"></div>
 <div id="baz">
<div id="biz">
 </div>
 <span><span>
</div>
//jQuery code to count child elements
$("#foo > div").size()

三、jquery搜索子元素的方法

jquery搜索子元素的方法,学习下children、find等方法的用法。

jquery搜索子元素的方法

1. children()方法
用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式:
 

复制代码 代码示例:
children([selector])
$("#menu_ul").children().css("color", "blue");

2. find()方法
用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格式如下:
 

复制代码 代码示例:
find([selector])
$("ul").find("span").css("color", "blue");//将ul元素下的span元素的文本元素设置为蓝色

例子:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索指定元素的子元素</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#login").children("input").css("background","#FCF");//给div元素的直接子元素设置背景色
$("#login").contents().css("color","red"); //设置指定元素字节点的文本颜色
$("#tab").find("td").css("border","1px solid blue").css("color","Green");//设置指定div元素下的td元素的边框及字体颜色
})
</script>
</head>
<body>
<h3>搜索指定元素的子元素 - www.jb200.com</h3>
<div>
<div id="login">
用户名:<input type="text"value="用户名"/>
密码:<input type="password" value="密码" />
<div><input type="submit"value="登录"/><input type="reset"value="重置"/></div>
</div>
<div id="tab">
<table width="452" height="176" border="1">
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</div>
</div>
</body>
</html>

效果图:

jquery搜索子元素个数