第8章：jQuery 遍历（操作多个元素）

8.1 遍历方法（重点掌握，简化多元素操作）

each()：遍历jQuery对象集合，执行回调函数

作用：遍历jQuery对象集合中的每个元素，对每个元素执行回调函数
语法：$(selector).each(function(index, element) {})
参数：
- index：当前元素的索引
- element：当前元素（DOM对象）

示例：

javascript

// 遍历所有li元素
$('li').each(function(index, element) {
    console.log('索引：', index, '内容：', $(element).text());
    // 修改每个li元素的内容
    $(element).text('项目 ' + (index + 1));
});

children()：获取元素的直接子元素

作用：获取匹配元素的直接子元素（不包括孙子元素）
语法：
- 获取所有直接子元素：$(selector).children()
- 获取指定的直接子元素：$(selector).children('selector')

示例：

javascript

// 获取ul的所有直接子元素
const children = $('ul').children();
console.log('子元素数量：', children.length);

// 获取ul的直接子元素li
const liChildren = $('ul').children('li');

parent()：获取元素的直接父元素

作用：获取匹配元素的直接父元素
语法：$(selector).parent()

示例：

javascript

// 获取li元素的父元素
const parent = $('li').parent();
console.log('父元素：', parent);

siblings()：获取元素的所有兄弟元素

作用：获取匹配元素的所有兄弟元素（不包括自己）
语法：
- 获取所有兄弟元素：$(selector).siblings()
- 获取指定的兄弟元素：$(selector).siblings('selector')

示例：

javascript

// 获取当前li元素的所有兄弟元素
$('li.active').siblings().css('color', 'gray');

// 获取当前li元素的兄弟元素中class为special的元素
const specialSiblings = $('li.active').siblings('.special');

find()：查找元素的后代元素（按选择器筛选）

作用：查找匹配元素的后代元素，按选择器筛选
语法：$(selector).find('selector')

示例：

javascript

// 查找ul下的所有li元素
const lis = $('ul').find('li');

// 查找div下的所有class为item的元素
const items = $('div').find('.item');

8.2 遍历中的this关键字（指向当前遍历的元素）

在jQuery的遍历方法中，this关键字指向当前遍历的DOM元素，而不是jQuery对象。如果需要使用jQuery方法操作当前元素，需要将其转换为jQuery对象，即$(this)。

示例：

javascript

$('li').each(function() {
    // this 指向当前DOM元素
    console.log('DOM元素：', this);
    console.log('元素内容：', this.textContent);
    
    // $(this) 转换为jQuery对象
    console.log('jQuery对象：', $(this));
    console.log('元素内容：', $(this).text());
    
    // 使用jQuery方法操作元素
    $(this).css('color', 'red');
});

8.3 实操案例：遍历列表元素、批量修改元素样式/内容

案例：遍历操作练习

HTML结构：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery遍历练习</title>
    <style>
        .container { 
            width: 400px; 
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        ul { 
            list-style: none;
            padding: 0;
        }
        li { 
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
        }
        .highlight { 
            background-color: yellow;
        }
        .special { 
            font-weight: bold;
            color: red;
        }
        .box { 
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
        }
        .box-item { 
            padding: 5px;
            margin: 5px 0;
            background-color: #f0f0f0;
        }
        button { 
            padding: 5px 10px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>遍历操作练习</h2>
        
        <!-- 列表遍历 -->
        <div>
            <h3>列表操作</h3>
            <ul id="myList">
                <li>项目1</li>
                <li class="special">项目2</li>
                <li>项目3</li>
                <li>项目4</li>
                <li class="special">项目5</li>
            </ul>
            <button id="highlightBtn">高亮特殊项目</button>
            <button id="numberBtn">为项目编号</button>
            <button id="resetBtn">重置列表</button>
        </div>
        
        <!-- 嵌套结构遍历 -->
        <div>
            <h3>嵌套结构操作</h3>
            <div class="box" id="parentBox">
                <div class="box-item">子元素1</div>
                <div class="box-item">子元素2
                    <div class="box-item">孙子元素1</div>
                    <div class="box-item">孙子元素2</div>
                </div>
                <div class="box-item">子元素3</div>
            </div>
            <button id="childrenBtn">操作直接子元素</button>
            <button id="findBtn">查找所有后代元素</button>
        </div>
        
        <!-- 兄弟元素操作 -->
        <div>
            <h3>兄弟元素操作</h3>
            <div class="box">
                <div class="box-item">元素1</div>
                <div class="box-item active">元素2（当前）</div>
                <div class="box-item">元素3</div>
                <div class="box-item">元素4</div>
                <div class="box-item">元素5</div>
            </div>
            <button id="siblingsBtn">操作兄弟元素</button>
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            // 高亮特殊项目
            $('#highlightBtn').click(function() {
                $('#myList li.special').each(function() {
                    $(this).addClass('highlight');
                });
            });
            
            // 为项目编号
            $('#numberBtn').click(function() {
                $('#myList li').each(function(index) {
                    $(this).text('项目 ' + (index + 1));
                });
            });
            
            // 重置列表
            $('#resetBtn').click(function() {
                $('#myList li').each(function(index) {
                    $(this).text('项目' + (index + 1)).removeClass('highlight');
                    // 恢复特殊项目
                    if (index === 1 || index === 4) {
                        $(this).addClass('special');
                    }
                });
            });
            
            // 操作直接子元素
            $('#childrenBtn').click(function() {
                $('#parentBox').children('.box-item').css('background-color', 'lightblue');
            });
            
            // 查找所有后代元素
            $('#findBtn').click(function() {
                $('#parentBox').find('.box-item').css('border', '1px solid red');
            });
            
            // 操作兄弟元素
            $('#siblingsBtn').click(function() {
                $('.box-item.active').siblings().css('opacity', '0.5');
            });
        });
    </script>
</body>
</html>

测试步骤：

保存文件为traversal-practice.html
用浏览器打开该文件
点击"高亮特殊项目"按钮，观察特殊项目的变化
点击"为项目编号"按钮，观察项目编号的变化
点击"重置列表"按钮，恢复列表原始状态
点击"操作直接子元素"按钮，观察直接子元素的变化
点击"查找所有后代元素"按钮，观察所有后代元素的变化
点击"操作兄弟元素"按钮，观察兄弟元素的变化

案例解析：

列表遍历：使用each()方法遍历列表元素，修改内容和样式
直接子元素：使用children()方法获取直接子元素并修改样式
后代元素：使用find()方法查找所有后代元素并修改样式
兄弟元素：使用siblings()方法获取兄弟元素并修改样式

新手易错点：

this关键字：
- 在遍历回调函数中，this指向DOM元素，不是jQuery对象
- 需要使用$(this)转换为jQuery对象才能使用jQuery方法
遍历方法的返回值：
- 大多数遍历方法返回jQuery对象，可以链式调用
- each()方法返回原始jQuery对象，而不是遍历结果
性能考虑：
- 对于大型DOM结构，频繁的遍历操作可能影响性能
- 尽量减少DOM操作，使用缓存变量
选择器优化：
- 结合使用遍历方法和选择器，可以更精确地定位元素
- 例如：$('ul').find('li.special') 比 $('ul li.special') 更高效
遍历顺序：
- 遍历方法按照DOM树的顺序遍历元素
- 可以使用reverse()方法反转遍历顺序

第8章：jQuery 遍历（操作多个元素） ​

8.1 遍历方法（重点掌握，简化多元素操作） ​

each()：遍历jQuery对象集合，执行回调函数 ​

children()：获取元素的直接子元素 ​

parent()：获取元素的直接父元素 ​

siblings()：获取元素的所有兄弟元素 ​

find()：查找元素的后代元素（按选择器筛选） ​

8.2 遍历中的this关键字（指向当前遍历的元素） ​

示例： ​

8.3 实操案例：遍历列表元素、批量修改元素样式/内容 ​

案例：遍历操作练习 ​

HTML结构： ​

测试步骤： ​

案例解析： ​

新手易错点： ​

第8章：jQuery 遍历（操作多个元素）

8.1 遍历方法（重点掌握，简化多元素操作）

each()：遍历jQuery对象集合，执行回调函数

children()：获取元素的直接子元素

parent()：获取元素的直接父元素

siblings()：获取元素的所有兄弟元素

find()：查找元素的后代元素（按选择器筛选）

8.2 遍历中的this关键字（指向当前遍历的元素）

示例：

8.3 实操案例：遍历列表元素、批量修改元素样式/内容

案例：遍历操作练习

HTML结构：

测试步骤：

案例解析：

新手易错点：