JQuery遍历元素的父辈和祖先的方法

JQuery遍历

首先我们要知道什么是父亲，儿子，后代，同胞，祖先

差异元素是保险商实验所的父元素，同时是其中所有内容的祖先。

保险商实验所元素是里元素的父元素，同时是差异的子元素

•左边的里元素是跨度的父元素，ul的子元素，同时是差异的后代。

跨度元素是里的子元素，同时是保险商实验所和差异的后代。

•两个里元素是同胞（拥有相同的父元素)。

•右边的里元素是的父元素，ul的子元素，同时是差异的后代。

• 元素是右边的里的子元素，同时是保险商实验所和差异的后代。

父类和祖先的遍历

1.parent()

遍历直接父亲不往上遍历其它的祖先

！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 ')).单击(函数(){$('#info ')).html('div4的父亲$('#div4 ').父项()。attr(' id ')；});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id='信息'/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div/body/html(9501 . 163.com)

2 .父母()

遍历它的所有祖先。每个（函数(I，e){})

对其中的每个元素进行遍历

其中我是索引，e是当前对象，相当于$(这个),但是前者是射流研究…对象，后者是jquery对象。

！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 ')).单击(函数(){$('#div4 ')).父母()。每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个祖先是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id='信息'/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div/body/html(9502 . 163.com)

那你就会问了第三个和第四个祖先是什么鬼让我们在网页中按F12调试一下看看结果

当i=3也就是到了第三个祖先结果是身体

当i=4也就是到了第四个祖先结果是超文本标记语言

3.parentsUntil()

遍历到指定的祖先（不包括该祖先)

！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 ')).单击(函数(){$('#div4 ')).parentsUntil('#div1 ').每个（函数(I，e) { $('#info ').html($('#info ').' html()'第我个祖先是，(' $(this)).attr(' id ')')')；});});});/script/head dyinput type=' button ' value='点击id=' BTN ' div id='信息'/div div id=' div 1 ' div id=' div 2 ' div id=' div 3 ' div id=' div 4 '/div/div/div/body/html(9505 . 163.com)

所以范围是在#div4和#div1中间不包含#div1

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