jQuery first child of “this”介绍

封面图 • 2025-11-28 • jQuery

在 jQuery 中，`this` 通常指的是当前正在处理的 HTML 元素。如果你想获取 `this` 的**第一个子元素**，可以使用 jQuery 提供的 `.first()` 方法或者 `.children()` 配合索引。

---

### ✅ 1. 使用 `.first()`

`.first()` 是一个 jQuery 方法，用于获取匹配元素集合中的**第一个元素**。

```javascript
$('selector').on('click', function() {
    var firstChild = $(this).first(); // 获取 this 的第一个子元素
    console.log(firstChild);
});
```

> 注意：`.first()` 是针对 **所有子元素** 的选择，它会返回匹配的第一个元素。

---

### ✅ 2. 使用 `.children().first()`

如果你只关心**直接子元素**（不包括后代元素），可以用 `.children()` + `.first()`：

```javascript
$('selector').on('click', function() {
    var firstChild = $(this).children().first(); // 获取 this 的第一个直接子元素
    console.log(firstChild);
});
```

- `.children()`：获取所有直接子元素（不包括后代）。
- `.first()`：从这些子元素中取第一个。

---

### ✅ 3. 使用 CSS 选择器 `:first-child`

你也可以用 CSS 选择器来直接选取第一个子元素：

```javascript
var firstChild = $(this).find(':first-child');
```

> 注意：`:first-child` 是 CSS 伪类，表示“是其父元素的第一个子元素”的元素。这和 `.first()` 略有不同。

---

### 🔍 示例

假设 HTML 如下：

```html
<div id="parent">
    <p>第一个子元素</p>
    <span>第二个子元素</span>
</div>
```

JavaScript:

```javascript
$('#parent').on('click', function() {
    var firstChild = $(this).first(); // <p>第一个子元素</p>
    console.log(firstChild.text()); // 输出 "第一个子元素"
});
```

---

### 📝 小结

| 方法 | 说明 |
|------|------|
| `.first()` | 获取匹配元素集合中的第一个元素 |
| `.children().first()` | 获取直接子元素中的第一个 |
| `:first-child` | CSS 选择器，选中父元素的第一个子元素 |

---

如果你有具体的 HTML 结构或场景，我可以帮你更准确地写出代码 😊