jQuery find(“#id”)与find(“.class”)实例分析与比较
JQuery find()方法是用来查找某个或某些元素，find()参数可以是元素的id，也可以是元素的class类名，但两者得到的结果是不一样的，本文将详细介绍find()方法的使用方法。
jQuery find()方法
HTML实例代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<br />
<textarea style="width:300px;height:130px">
<div id="main">
<p id="p1">子元素p1</p>
<p id="p2">子元素p2</p>
<p id="p3">子元素p3</p>
<p class="el">子元素p4</p>
<p class="el">子元素p5</p>
<p class="el">子元素p6</p>
</div>
</textarea>
<div id="main">
<p id="p1">子元素p1</p>
<p id="p2">子元素p2</p>
<p id="p3">子元素p3</p>
<p class="el">子元素p4</p>
<p class="el">子元素p5</p>
<p class="el">子元素p6</p>
</div>
<br>
<input type=button id="btn" value="$('#main').find('#p1')">
<input type=button id="btn2" value="$('#main').find('.el')">
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var mp = $("#main").find("#p1");
console.log($(mp).html()); // 子元素p1
}, );
}, );
$(function () {
$("#btn2").click(function () {
var mp = $("#main").find(".el");
//console.log($(mp).html()); // 子元素p4
//console.log($(mp).length); // 3
for(var i=0; i < mp.length; i++){
console.log($(mp[i]).html()); // 子元素p4 子元素p5 子元素p6
}
}, );
}, );
</script>
</body>
</html>
execcodegetcode
实例分析
1、$("#main").find("#p1")是表示在id=main的元素子元素里，查找id=p1的元素。本实例查找到的html代码是这个：
<p id="p1">子元素p1</p>
因此，如下代码：
var mp = $("#main").find("#p1");
console.log($(mp).html());
输出内容是：
子元素p1
因为id是唯一的，所以find("#id")查找的内容也是唯一的。
2、$("#main").find(".el")是表示在id=main的元素子元素里，查找class=el的元素。本实例查找到的html代码是这个：
<p class="el">子元素p4</p>
<p class="el">子元素p5</p>
<p class="el">子元素p6</p>
从这看到，它查找到的内容不再是唯一的了，而是有很多。它的结果被保存在一个数组里，我们可以使用循环的方法从数组里获得各个数据，代码如下：
var mp = $("#main").find(".el");
for(var i=0; i < mp.length; i++){
console.log($(mp[i]).html());
}
mp.length是数组的长度。
输出内容是：
子元素p4
子元素p5
子元素p6
总结
本文介绍了JQuery如何用find()方法查找某个或某些元素。find("#id")查找的内容是唯一的，而find(".class")获得的是一个数组，内容不一定唯一。
您可能对以下文章也感兴趣
- JQuery计算HTML元素子元素(child elements)
