jquery遍历之父项()和父母()的区别及parentsUntil()方法详解

。parent(选择器)获取当前匹配元素集中每个元素的父元素，该元素由选择器过滤(可选)。parents(选择器)获取当前匹配元素集中每个元素的祖先元素，该元素由选择器(可选)进行筛选。给定一个表示DOM元素集合的jQuery对象。parents()方法允许我们在DOM树中搜索这些元素的祖先元素，并构建一个新的jQuery对象，匹配的元素从最近的父元素向上按顺序排列。元素从最近的父元素开始以向外的顺序返回。那个。parents()方法类似于。parent()方法，不同的是后者遍历DOM树的单个层次。这两种方法都可以接受可选的选择器表达式，这些表达式与我们传递给$()函数的参数属于同一类型。如果应用此选择器，将通过检测元素是否与选择器匹配来过滤元素。以下示例复制如下： ul class=' level-1 ' Li class=' item-I ' I/Lili class=' item-ii ' I ul class=' level-2 ' Li class=' item-A ' A/Lili class=' item-b ' Bul class=' level-3 ' Li class=' item-1 ' 1/Lili class=' item-2 ' 2/Lili class=' item-3 ' 3/Li/ul/Lili class=' item-c ' c/Li/ul/Lili class='项目-a’)。父母()。CSS('背景色'，'红色')；作为这个调用的结果，像二级列表、项目二和一级列表(一直到DOM树到html)这样的元素被设置为红色背景。由于我们没有应用选择器表达式，父元素自然成为了对象的一部分。如果已经应用了选择器，则在包含该元素之前，会检测该元素是否与选择器匹配。由于我们没有应用选择器表达式，所有祖先元素都是返回的jQuery对象的一部分。如果应用了选择器，将只包括其中的匹配项。如果从项目A开始，我们可以找到它的父元素：复制代码如下： $ ('li。项目-a’)。父项()。CSS('背景色'，'红色')；这个调用的结果是为2级列表设置一个红色背景。由于我们没有应用选择器表达式，父元素自然成为了对象的一部分。如果已经应用了选择器，则在包含该元素之前，会检测该元素是否与选择器匹配。

下面在看一个例子复制代码代码如下：bodybody div id='一'一div id='二hello/div id='三'三PP a href=' # ' tonsh/a/p/div/div/body思考：复制代码代码如下：美元(' a ').parent()$(“a”).parents()$('a ').双亲(' div : eq(0)')var id=$(' a ').父母(' div:eq(1)').儿童(“div:eq(0)”).html()；例三复制代码代码如下： div id=' div 1 ' div id=' div 2 ' p/p/div id=' div 3 ' class=' a ' p/p/div id=' div 4 ' p/p/div/div复制代码代码如下：美元(' p ').parent()$(“p”).父代('。a')$('p ').父项()。parent()$(“p”).parents()$('p ').父母('。a’)下面看一下以前项目中使用的例子复制代码代码如下： if(MySQL _ num _ rows($ query)){ while($ arr=MySQL _ fetch _ array($ query)){ echo admin tr style=' text-align : center；'TD输入类型=' checkbox ' name=' checkbox ' value=' $ arr[id]'//TD $ arr[id]/TD $ arr[log]/TD $ arr[IP]/TD TD $ arr[time]/TD tdforminput type=' hidden ' name=' id ' value=' $ arr[id]'/span class=' del '删除/span mg src=' http : images/del。gif '/form/TD/trad min；}//while end；} else { echo ' tr align=center TD col span=6暂无登陆日志/TD/tr '；}jquery相关代码复制代码代码如下：//删除选中日志$('.delcheckbox ').click(function(){ var str=' '；$('.制表符输入[name=checkbox]:checked ').每个（函数(){ str=$(this)).val()'，'；});str=str.substring(0，str。长度-1)；if(chk _ Batch _ PKEY(str)){ art。对话。确认('你确认删除选中的日志吗？'，function(){ $ .post('myRun/managerlog_del.php '，{id:str}，function(tips){ if(tips==' ok '){ art。对话。通过({ title : '信息，icon: '微笑脸，content: '删除成功、ok:函数(){ art。对话。close()；位置。重载()；}});}else{ art.dialog.tips('删除失败');} });返回真；});} else { art。对话。通过({ title : '信息，icon: '哭丧着脸，content: '请选择删除的日志、ok:函数(){ art。对话。close()；}});}}).addClass(')指针');//del事件$(' .德尔' .bind('click ')，function(event){ var _ tmpQuery=$(this)；var id=$('input[name='id']'，$(this).父母(' form:first ').attr(' value ')；art.dialog.confirm('你确认删除该日志吗？'，function(){ $ .post('myRun/managerlog_del.php '，{id:id}，function(tips){ if(tips==' ok '){ art。对话。提示('成功删除');_ TMpquery。父母(' tr : first ').hide()；}else{ art.dialog.tips(tips，5)；} });返回真；});});涉及到的知识点：var id=$('input[name='id']'，$(this).父母(' form:first ').attr(' value ')；参考文献：parent():http://www .w3school。com。cn/jquery/遍历_家长。aspparents():http://www .w3school。com。cn/jquery/遍历_parents.aspparentsUntil()方法定义：parentsUntil()获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括)被选择器、DOM节点或jQuery对象匹配的元素。其实，parentsUntil()方法，以及下一个直到()方法、前一个()方法，原理一样。唯一不同的是下一个直到()是往下，前一个()是往上（同辈元素)，parentsUntil()也是往上（找祖先元素)下面看一个例子：复制代码代码如下：DOCTYPE htmlhtmlhead脚本类型=' text/JAVAScript ' src=' http :/jquery/jquery。js '/脚本/head dyul类='一级是' li类='item-i'I/li类=' item-ii ' ii ' ul类=' 2级是' li类='item-a'A/li类=' item-b ' ul类=' 3级' li类='item-1'1/li类=' item-a '李类parentsUntil(' .一级')。css(“”背景色','红色');$('li.item-2 ').parentsUntil($('ul.level-1 ')，' .是')。css(“”边框，' 3px纯蓝');/脚本/正文得到结果如下

分析：复制代码如下： $ ('li。项目-a’)。父母直到('。1级’)。CSS('背景色'，'红色')；复制代码如下： ul class=' level-1 yes '-不符合。实际上，它符合li.item-a的祖先元素.但是，根据parentsUntil()方法的定义，Li class=' item-I ' I/Li-不包括选择器、DOM节点或jquery对象匹配的元素-不符合，这是其祖先元素的兄弟元素。不是李的祖先.Li class=' item-ii ' ii-符合ul class=' level-2 yes '-符合Li class=' item-a ' a/Li-从这里开始查找其祖先元素。Li class=' item-b ' b ' ul class=' level-3 ' Li class=' item-1 ' 1/Li Li class=' item-2 ' 2/Li Li class=' item-3 ' 3/Li/ul/Li Li class=' item-c ' c/Li/ul/Li class=' item-iii ' iii/Li/ul我们再来看第二个说法：复制码如下： $ ('li。项目-2’)。父母直到($ ('ul。level-1 ')，'。是’)。CSS('边框'，' 3pxsolid。复制代码如下： ul class=' level-1 yes '-它是其祖先元素并满足选择器表达式'。是'，但根据parentsUntil()方法的定义，是li class='item-i'I/li不匹配，不包括选择器、DOM节点或jquery对象匹配的元素，也不是它的祖先元素。Li class=' item-ii ' ii-它的祖先元素不满足UL class=' level-2 yes '-它的祖先元素满足选择器表达式。是'[因此，它最终与此节点匹配。得到如上图的蓝色边框效果]Li class=' item-a ' a/Li Li class=' item-b ' B-是它的祖先ul class=' level-3 '-是它的祖先Li class=' item-1 ' 1/Li Li class=' item-2 ' 2/Li-从这里开始。li类='项目-3'3/li /ul /li类='项目-c'C/li /ul /li li类='项目-iii'III/li/ul