jQuery获取this当前对象子元素对象的方法

封面图 • 2025-11-24 • jQuery

在 jQuery 中，如果你想获取当前 `this` 对象的**子元素对象**，可以使用以下几种方法：

---

### ✅ 方法一：使用 `.children()`

```javascript
$(this).children();
```

- **作用**：获取 `this` 元素的所有**直接子元素**（即层级为一级的子元素）。
- **返回值**：jQuery 对象，包含所有直接子元素。

**示例：**

```html
<div class="parent">
  <span>子元素1</span>
  <p>子元素2</p>
</div>
```

```javascript
$('.parent').click(function() {
  var children = $(this).children(); // 获取 .parent 的所有直接子元素
  children.css('color', 'red');     // 将所有子元素文字颜色变为红色
});
```

---

### ✅ 方法二：使用 `.find()`

```javascript
$(this).find('selector');
```

- **作用**：查找 `this` 元素内部的所有匹配选择器的后代元素（包括嵌套的子元素）。
- **返回值**：jQuery 对象。

**示例：**

```html
<div class="parent">
  <div class="child">
    <span>嵌套子元素</span>
  </div>
</div>
```

```javascript
$('.parent').click(function() {
  var span = $(this).find('span'); // 查找所有 span 元素（包括嵌套的）
  span.css('color', 'blue');
});
```

---

### ✅ 方法三：使用 `.each()` 遍历子元素

如果你需要对每个子元素进行操作，可以结合 `.each()`：

```javascript
$(this).children().each(function() {
  $(this).css('background', 'yellow');
});
```

---

### ✅ 方法四：使用 `.first()` 或 `.last()` 获取第一个或最后一个子元素

```javascript
$(this).children().first();   // 第一个子元素
$(this).children().last();    // 最后一个子元素
```

---

### 总结对比

| 方法       | 说明                         | 是否包含嵌套子元素 |
|------------|------------------------------|---------------------|
| `.children()` | 直接子元素（一级）         | ❌                  |
| `.find()`     | 所有后代元素（包括嵌套）   | ✅                  |

---

如果你能提供具体的 HTML 结构和你想操作的子元素类型，我可以给出更精确的代码示例。