jquery选择器 之 获取父级元素、同级元素、子元素

客官°小女子只卖身不卖艺 2022-07-26 00:22 466阅读 0赞

-——————————转自http://blog.csdn.net/tolcf/article/details/39289471

一、获取父级元素

1、 parent([expr]):
获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

[html] view plain copy

print ? 在CODE上查看代码片 派生到我的代码片

  1. <**ul class=”level-1”>**
  2. <**li class=”item-i”>I</li>**
  3. <**li class=”item-ii”>**II
  4. <**ul class=”level-2”>**
  5. <**li class=”item-a”>A</li>**
  6. <**li class=”item-b”>**B
  7. <**ul class=”level-3”>**
  8. <**li class=”item-1”>1</li>**
  9. <**li class=”item-2”>2</li>**
  10. <**li class=”item-3”>3</li>**
  11. </**ul**>
  12. </**li**>
  13. <**li class=”item-c”>C</li>**
  14. </**ul**>
  15. </**li**>
  16. <**li class=”item-iii”>III</li>**
  17. </**ul**>

如果我们从项目 A 开始，则可找到其父元素：

[javascript] view plain copy

print ? 在CODE上查看代码片 派生到我的代码片

  1. $(‘li.item-a’).parent().css(‘background-color’, ‘red’);

此次调用的结果是，为 level-2 列表设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。

2、parents()

获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。

[javascript] view plain copy

print ? 在CODE上查看代码片 派生到我的代码片

  1. $(‘li.item-a’).parents().css(‘background-color’, ‘red’);

此次调用的结果是，level-2 列表、项目 II 以及 level-1 列表等元素（沿 DOM 树一路向上直到 ）设置红色背景。

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

SouthEast

二、获取同级元素

1、.next(selector)
获得匹配元素紧邻的下一个同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

2、.nextAll(selector)
获得匹配元素后面的所有同胞元素，由选择器筛选是可选的。

3、.prev(selector)
获得匹配元素紧邻的前一个同胞元素（与next相反）

4、.prevAll(selector)
获得当前匹配元素前面的所有同胞元素（与nextAll相反）

三、获取子元素

1、.children(selector)
返回匹配元素的子元素，添加可选参数可通过选择器进行过滤。

2、.find(selector)
获得当前元素的后代

发表评论

表情：
评论列表 （有 0 条评论，466人围观）

还没有评论，来说两句吧...

相关阅读