<think>我们讨论的是
jQuery中如何使用
.each()方法进行嵌套
循环。
jQuery的
.each()方法用于遍历一个
jQuery对象中的每个元素，并对每个元素执行一个函数。当我们需要嵌套遍历时，可以在一个
.each()
循环内部再使用另一个
.each()
循环。
例如，假设我们有一个表格，我们想遍历每一行（tr），然后在每一行中遍历每个单元格（td）。我们可以这样写：
首先，我们通过选择器选择所有的行，然后对每一行使用
.each()。在每一行的
循环内部，我们再选择该行下的所有单元格，然后对单元格进行
.each()遍历。
下面是一个具体的例子：
假设HTML结构如下：
```html
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
```
我们想要遍历每一行和行中的每个单元格，并打印出单元格的文本内容。
使用
jQuery的
.each()嵌套：
```javascript
// 外层
循环遍历每一行
$('#myTable tr')
.each(function(rowIndex) {
// 内层
循环遍历当前行的每个单元格
$(this)
.find('td')
.each(function(cellIndex) {
// 打印行索引和列索引以及单元格内容
console
.log('行: ' + rowIndex + ', 列: ' + cellIndex + ', 内容: ' +
$(this)
.text());
});
});
```
解释：
1
. 外层选择器`
$('#myTable tr')`选择了id为myTable的表格中的所有行（tr）。
2
. 外层`
.each(function(rowIndex) {
... })`遍历每一行。回调函数中的参数`rowIndex`是当前行在集合中的索引。
3
. 在每一行的回调函数内部，`
$(this)`代表当前的行（tr）元素。我们使用`find('td')`来获取当前行中的所有单元格（td）。
4
. 内层的`
.each(function(cellIndex) {
... })`遍历每个单元格。参数`cellIndex`是当前单元格在行中的索引。
5
. 在内层
循环中，`
$(this)`代表当前的单元格（td），使用`
.text()`获取单元格的文本内容。
注意：在
.each()的回调函数中，`this`指向当前正在处理的DOM元素。因此，为了使用
jQuery方法，我们将其包装为`
$(this)`。
另外，
.each()方法的回调函数还可以有两个参数：第一个参数是索引，第二个参数是元素本身（相当于this）。所以上面的外层
循环也可以写成：
```javascript
$('#myTable tr')
.each(function(index, element) {
// 使用element，相当于this
$(element)
.find('td')
.each(function(cellIndex, cellElement) {
console
.log('行: ' + index + ', 列: ' + cellIndex + ', 内容: ' +
$(cellElement)
.text());
});
});
```
这样写有时更清晰，因为可以直接使用第二个参数（元素）而不必使用this。
现在，我们按照要求，给出代码示例并解释。
代码示例：
```javascript
// 假设页面中有一个id为"myTable"的表格
$('#myTable tr')
.each(function(rowIdx) {
// 在每一行中，找到所有的td元素
$(this)
.children('td')
.each(function(colIdx) {
// 输出每个单元格的信息
console
.log(`行索引:
${rowIdx}, 列索引:
${colIdx}, 内容:
${
$(this)
.text()}`);
});
});
```
解释：
1
. 外层
循环：`
$('#myTable tr')`选择表格的所有行，然后对每一行执行回调函数。回调函数的参数`rowIdx`是当前行的索引（从0开始）。
2
. 在行
循环内，`
$(this)`代表当前行（tr）。我们使用`
.children('td')`获取当前行的直接子元素td（注意：如果单元格在嵌套结构中，可能需要使用
.find()，但通常td是tr的直接子元素，所以
.children()更合适）。
3
. 内层
循环：对当前行的每个td进行遍历。参数`colIdx`是当前单元格在行中的索引（从0开始）。
4
. 在内层
循环中，`
$(this)`代表当前单元格（td），通过`
.text()`方法获取其文本内容，并打印出行索引、列索引和内容。
注意事项：
- 使用
.each()嵌套时，注意内层
循环的选择器作用范围。内层
循环的选择器应该相对于外层
循环的当前元素（即this）。
- 如果表格中有th（表头单元格），那么可能需要调整选择器，比如使用`
$(this)
.children('td, th')`来同时遍历td和th。
相关问题：
根据要求，我们最后提出四个相关问题：
§§相关问题§§:
1
. 在
jQuery中，`
.each()`方法和JavaScript原生的`for
Each`方法有什么主要区别？
2
. 如果在一个`
.each()`
循环中，我们想提前
跳出循环（类似于`break`），应该怎么做？
3
. 在嵌套的`
.each()`
循环中，如何从内层
循环中
跳出外层
循环？
4
. 除了`
.each()`方法，
jQuery还有哪些常用的遍历方法？请举例说明。</think>###
jQuery 使用 `
.each()` 嵌套遍历
在
jQuery 中，`
.each()` 方法用于遍历
jQuery 对象集合。当需要嵌套遍历时（例如表格的行列遍历），可以在外层 `
.each()` 的回调函数内部再调用一个 `
.each()`。以下是详细实现和示例：
#### 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://code
.jquery.com/
jquery-3
.6
.0
.min
.js"></script>
</head>
<body>
<table id="dataTable">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
<script>
$(document)
.ready(function() {
// 外层遍历：所有行
$('#dataTable tr')
.each(function(rowIndex) {
// 内层遍历：当前行的所有单元格
$(this)
.find('td')
.each(function(cellIndex) {
console
.log(
`行
${rowIndex}, 列
${cellIndex}:
${
$(this)
.text()}`
);
});
});
});
</script>
</body>
</html>
```
#### 代码解释
1
. **外层遍历**
`
$('#dataTable tr')
.each(
...)`：
选择所有 `<tr>` 元素并遍历。回调函数的参数：
- `rowIndex`：当前行的索引（从 0 开始）。
- `this`：当前行的 DOM 元素（等价于 `
$(this)`）。
2
. **内层遍历**
`
$(this)
.find('td')
.each(
...)`：
在当前行内查找所有 `<td>` 元素并遍历。回调函数的参数：
- `cellIndex`：当前单元格的索引（从 0 开始）。
- `this`：当前单元格的 DOM 元素。
3
. **关键点**
- `
$(this)` 将 DOM 元素转换为
jQuery 对象，以便调用 `
.find()` 等方法。
- 嵌套时需确保内层选择器的作用域正确（例如 `
$(this)
.find(
...)`）。
#### 输出结果
```
行 0, 列 0: A1
行 0, 列 1: A2
行 1, 列 0: B1
行 1, 列 1: B2
```
---
###
本文介绍如何在jQuery的each循环中使用return false实现类似break的效果来提前结束循环，以及使用return true来跳过当前循环继续执行下一个元素，类似于continue。通过具体代码示例展示了如何根据条件判断来控制循环流程。
扫一扫
1574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
