在讲解这两个方法的时候，咱们先弄懂一个概念，什么叫做后代，什么叫做同级
咱们先用一个图片来说一下。
注：该图片取自菜鸟驿站。
<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()