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)