JQuery遍历元素的后代和同胞实现方法

1.遍历后代

儿童()

儿童()方法返回被选元素的所有直接子元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).click(function(){ $(“# div 1”)).儿童()。每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个直接后代是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9500 . 163.com)

查找()

查找()方法返回被选元素的后代元素，一路向下直到最后一个后代。

查找()里必须加上选择器如果不加就显示不了

所以里面必须加选择器例如查找(' * ')查找(“跨度”)

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).click(function(){ $(“# div 1”)).查找(' * ')。每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个后代是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9501 . 163.com)

2.遍历同胞

兄弟姐妹()

兄弟姐妹()方法返回被选元素的所有同胞元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('#div2 ')).兄弟姐妹()。每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个同胞是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9502 . 163.com)

下一个()

下一个()被选元素的下一个同胞元素

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('#p2 ')).下一个()。每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个同胞是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9503 . 163.com)

nextAll()

nextAll()方法返回被选元素的所有跟随的同胞元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('#p2 ')).nextAll().每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个同胞是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9504 . 163.com)

下一个直到()

下一个直到()方法返回介于两个给定参数之间的所有跟随的同胞元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('#p2 ')).下一个直到(' #p3 ').每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个同胞是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9505 . 163.com)

prev()

prev()普雷瓦尔()prev直到()prev=previous=前面的

所以遍历的是指定元素的前面同胞这个效果和下一个()相仿就不举例子了

3.过滤

第一次()

第一次()方法返回被选元素的首个元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('div p ')).第一个()。每个（函数(I，e) { $('#info ').html($('#info ').html() '(' $(this)' .attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9506 . 163.com)

最后()

最后()方法返回被选元素的最后一个元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('div p ')).最后()。每个（函数(I，e) { $('#info ').html($('#info ').html() '(' $(this)' .attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9507 . 163.com)

eq()

eq()方法返回被选元素中带有指定索引号的元素。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('div p ')).等式(1)。每个（函数(I，e) { $('#info ').html($('#info ').html() '(' $(this)' .attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9508 . 163.com)

过滤器()

过滤器()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('div p ')).过滤器(' #p2 ').每个（函数(I，e) { $('#info ').html($('#info ').html() '(' $(this)' .attr(' id ')')')；});});});/脚本

不是()

不是()方法返回不匹配标准的所有元素。

不是()方法与过滤器()相反。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS '/style script type=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){$('div p ')).不是(' #p2 ').每个（函数(I，e) { $('#info ').html($('#info ').html() '(' $(this)' .attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id=' info '/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div p id=' P1 '/p p p id=' p2 '/p span id=' span 1 '/span id=' span 2 '/span p id=' P3 '/p/div/body/html(9510 . 163.com)

以上这篇JQuery遍历元素的后代和同胞实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。