jquery获取父级元素、同级元素以及子元素的方法

科技前沿 • 2025-03-21 23:34 • 阅读 23

大家好，我是讯享网，很高兴认识大家。

有文件的结构如下：

 <div class="level-1"> <tr class="tr1"> <td class="td1">1</td> <td class="td2">2</td> <td class="td3">3</td> <td class="td4">4</td> </tr> <tr class="tr2"> <td class="td1"> <span class="span1">5</span> </td> <td class="td2">6</td> <td class="td3">7</td> <td class="td4">8</td> </tr> </div>

讯享网

1. 获取父级元素-----parent()

讯享网//获取td2节点的父节点即tr1，并将背景颜色的样式改为黑色 $('.td2').parent().css('background-color', 'black');

另外：parent([document])方法取得一个包含着所有匹配元素的唯一父元素的元素集合。

比如对于下述html

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

则

讯享网$("p").parent(".selected")

则是获取p标签的父元素中每个class为selected的父元素。

.closest(seletor) 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

<ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <ul class="level-2"> <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> <li class="item-iii">III</li> </ul>

讯享网//将class为level-2 的<ul>变为红色，因为他是向上搜索时遇到的第一个元素。 $('li.item-a').closest('ul').css('background-color', 'red');

二。同级元素

讯享网

<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> //将list -item4便为红色 $( "li.third-item" ).next().css( "background-color", "red" );

讯享网<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> //将list -item4、list-item5便为红色 $( "li.third-item" ).nextAll().css( "background-color", "red" );

三、获取子元素

<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <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> <li class="item-iii">III</li> </ul> //将A, B, C 的背景颜色变成红色 $('ul.level-2').children().css('background-color', 'red');

讯享网<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <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> <li class="item-iii">III</li> </ul> //将A、B、1、2、3 以及 C设置为红色背景 $('li.item-ii').find('li').css('background-color', 'red');

jquery获取父级元素、同级元素以及子元素的方法

相关推荐