jquery中的find（）和next（）的用法及区别

在讲解这两个方法的时候，咱们先弄懂一个概念，什么叫做后代，什么叫做同级
咱们先用一个图片来说一下。

 

 注：该图片取自菜鸟驿站。

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
两个 <li> 元素是同胞（拥有相同的父元素）
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。

好了，到这里，咱们基本上就知道了祖先，同级，后代这些概念了，接下来就详细说一说find（）和next（）的用法和区别。

- find()
find()的方法返回的是后代元素。下面举个例子。

 <div id="test1">test1</div>
     <div id="test2"> 
        <div id="test3">test3</div>
        <div id="test3_1">test3_1</div>
     </div> 
<div id="test4">test4</div>

下面咱们用find()方法试试。

<script>
$(document).ready(function(){
var test1 = $("#test2").find('div[id="test3"]').text();
                 alert(test1);

});
</script>

显示结果为：

如果咱们换个写法：

<script>
$(document).ready(function(){
var test1 = $("#test2").find('div[id="test4"]').text();
                 alert(test1);
});
</script>

 那么结果为：

则表示获取不到值，因为find()方法只能获取到后代元素的值，同级的无法获取，那么，谁能获取到同级的呢，next()就派上用场了。

- next()
next()方法用于获得后一个同级元素，看下面的例子就会很明白了。

<script>
$(document).ready(function(){
var test1 = $("#test2").next('div[id="test4"]').text();
                 alert(test1);

});
</script>

 用刚才find（）方法没法获取到的代码，方法名字改了一下，就可以显示结果。

但是注意，是后一个同级元素，如果中间间隔 一个，可是获取不到的哦！
看下面的例子：

<script>
$(document).ready(function(){
var test1 = $("#test1").next('div[id="test4"]').text();
                 alert(test1);

});
</script>

 

 

<script>
$(document).ready(function(){
var test1 = $("#test1").next().next('div[id="test4"]').text();
                 alert(test1);

});
</script>

 

 

果真，可以显示出来，所以记住是后一个同级。

最后总结一下：

        find()是用来查找后代元素，next()是用来查找同级元素的。
        find()可以查找后代任意一个元素，但需要进行匹配。
        next()只能查找后一个同级元素，如果想查找下下个元素，就多用一个next()