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

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

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

一、获取父级元素

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

**\[html\]**  [view plain][]  [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

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

**2、parents()**

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

**\[javascript\]**  [view plain][]  [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

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

**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)**  
获得当前元素的后代

[view plain]: http://blog.csdn.net/tolcf/article/details/39289471#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/468945
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/468945/fork
[SouthEast]: /images/20220724/75835348fd1746019f300e67b6c48628.png