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

封面图 • 2025-11-22 • jQuery

在 jQuery 中，你可以使用各种选择器和方法来获取 **父级元素**、**同级元素** 和 **子元素**。下面是这些常用操作的说明和示例代码：

---

## 一、获取父级元素

### 方法：
- `parent()`：获取直接父元素（只向上找一级）
- `parents()`：获取所有祖先元素（可以指定选择器）

### 示例：
```html
<div class="grandparent">
  <div class="parent">
    <p class="child">子元素</p>
  </div>
</div>
```

```javascript
var $child = $('.child');

// 获取直接父元素（.parent）
var $parent = $child.parent();

// 获取所有祖先元素（包括 .grandparent）
var $parents = $child.parents();
```

---

## 二、获取同级元素

### 方法：
- `siblings()`：获取所有同级元素（不包括自己）
- `prev()` / `next()`：获取前一个/后一个同级元素
- `prevAll()` / `nextAll()`：获取前面/后面的所有同级元素
- `siblings(selector)`：带选择器过滤的同级元素

### 示例：
```html
<ul>
  <li class="item">Item 1</li>
  <li class="item active">Item 2</li>
  <li class="item">Item 3</li>
</ul>
```

```javascript
var $active = $('.active');

// 获取所有同级元素（三个 li）
var $siblings = $active.siblings();

// 获取前面的同级元素
var $prev = $active.prev();

// 获取后面的同级元素
var $next = $active.next();

// 获取前面所有的同级元素
var $prevAll = $active.prevAll();

// 获取后面所有的同级元素
var $nextAll = $active.nextAll();
```

---

## 三、获取子元素

### 方法：
- `children()`：获取直接子元素（只向下一层）
- `find()`：查找后代元素（可以递归查找）

### 示例：
```html
<div class="parent">
  <p>子元素1</p>
  <div class="child">
    <span>子元素2</span>
  </div>
</div>
```

```javascript
var $parent = $('.parent');

// 获取直接子元素（<p> 和 <div>）
var $children = $parent.children();

// 获取所有后代元素（包括嵌套的 span）
var $find = $parent.find('span');
```

---

## 总结表格

| 操作       | 方法           | 说明                         |
|------------|----------------|------------------------------|
| 父级元素   | `parent()`     | 直接父元素                   |
|            | `parents()`    | 所有祖先元素                 |
| 同级元素   | `siblings()`   | 所有同级元素                 |
|            | `prev()`       | 前一个同级元素               |
|            | `next()`       | 后一个同级元素               |
| 子元素     | `children()`   | 直接子元素                   |
|            | `find()`       | 所有后代元素（可递归查找）   |

---

如果你有具体的 HTML 结构，我可以帮你写更精确的 jQuery 代码。需要的话可以继续提问！

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

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