主页/jQuery教程/DOM操作与遍历/jQuery DOM遍历

jQuery教程

jQuery DOM遍历

10,830字
46–69 分钟

jQuery DOM遍历是jQuery核心操作的重要组成部分，指通过jQuery选择器定位到指定元素后，沿着DOM树结构查找、访问相关元素的过程。jQuery DOM遍历提供了一系列便捷方法，可快速实现祖先、后代、兄弟元素的查找与过滤，大幅简化原生JavaScript DOM遍历的繁琐代码，是前端开发中操作DOM元素的核心手段。

目录

祖先遍历

祖先遍历是jQuery DOM遍历中定位元素上级节点的操作，核心方法包括parent()、parents()、closest()，三种方法定位范围与返回结果存在差异，可根据实际需求选择使用，共同构成jQuery DOM遍历中祖先元素查找的完整体系。

parent()方法

parent()方法用于获取匹配元素的直接父元素，即DOM树中紧邻匹配元素的上一级元素，每次调用仅返回一个直接父元素，不包含祖父级及以上元素，是jQuery DOM遍历中最基础的祖先查找方法。

语法

$(selector).parent();

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery parent()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent-box { border: 2px solid #000; padding: 10px; margin: 10px 0; }
        .child-box { border: 1px solid #f00; padding: 5px; }
    </style>
</head>
<body>
    <div class="parent-box">
        直接父元素
        <div class="child-box" id="target">目标元素</div>
    </div>

    <script>
        // 获取目标元素的直接父元素
        var parentElem = $("#target").parent();
        // 为父元素添加样式，便于识别
        parentElem.css("background-color", "#eee");
    </script>
</body>
</html>

parents()方法

parents()方法用于获取匹配元素的所有祖先元素，包含直接父元素、祖父元素、曾祖父元素直至根元素（html元素），返回一个包含所有祖先元素的jQuery对象，可通过选择器筛选指定类型的祖先元素，是jQuery DOM遍历中范围最广的祖先查找方法。

语法

// 获取所有祖先元素
$(selector).parents();

// 筛选指定选择器的祖先元素
$(selector).parents(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery parents()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        html { padding: 10px; }
        body { padding: 10px; border: 1px solid #333; }
        .grandparent { padding: 10px; border: 1px solid #666; }
        .parent { padding: 10px; border: 1px solid #999; }
        .child { padding: 5px; border: 1px solid #f00; }
    </style>
</head>
<body>
    <div class="grandparent">
        祖父元素
        <div class="parent">
            父元素
            <div class="child" id="target">目标元素</div>
        </div>
    </div>

    <script>
        // 获取目标元素的所有祖先元素
        var allParents = $("#target").parents();
        // 为所有祖先元素添加统一样式
        allParents.css("background-color", "#f5f5f5");

        // 筛选指定类名的祖先元素
        var grandparent = $("#target").parents(".grandparent");
        grandparent.css("border-color", "#f00");
    </script>
</body>
</html>

closest()方法

closest()方法用于获取匹配元素最近的祖先元素（包含自身），即从匹配元素本身开始向上查找，找到第一个符合指定选择器的元素后停止，返回单个元素，兼具parent()方法的精准性与parents()方法的筛选性，是jQuery DOM遍历中实用性极强的祖先查找方法。

语法

$(selector).closest(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery closest()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .container { padding: 10px; margin: 10px 0; }
        .box { padding: 10px; border: 1px solid #000; }
        .active { background-color: #ffe485; }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="box" id="target">目标元素</div>
        </div>
    </div>

    <script>
        // 查找目标元素最近的.box类元素（包含自身）
        var closestBox = $("#target").closest(".box");
        closestBox.addClass("active");

        // 查找目标元素最近的.container类元素
        var closestContainer = $("#target").closest(".container");
        closestContainer.css("border", "2px solid #f00");
    </script>
</body>
</html>

后代遍历

后代遍历是jQuery DOM遍历中定位元素下级节点的操作，核心方法包括children()与find()，两种方法分别适用于直接子元素与所有后代元素的查找，是jQuery DOM遍历中获取下级元素的核心手段。

children()方法

children()方法用于获取匹配元素的所有直接子元素，即DOM树中紧邻匹配元素的下一级元素，不包含孙子级及以下元素，与parent()方法相对应，是jQuery DOM遍历中精准获取直接子元素的方法。

语法

// 获取所有直接子元素
$(selector).children();

// 筛选指定选择器的直接子元素
$(selector).children(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery children()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent { padding: 10px; border: 2px solid #000; }
        .child { padding: 5px; margin: 5px 0; border: 1px solid #f00; }
        .grandchild { padding: 3px; border: 1px solid #0f0; }
    </style>
</head>
<body>
    <div class="parent" id="target">
        父元素
        <div class="child">直接子元素1</div>
        <div class="child">直接子元素2
            <div class="grandchild">孙子元素</div>
        </div>
    </div>

    <script>
        // 获取所有直接子元素
        var childrenElem = $("#target").children();
        childrenElem.css("background-color", "#eee");

        // 筛选指定类名的直接子元素
        var childElem = $("#target").children(".child");
        childElem.css("border-color", "#00f");
    </script>
</body>
</html>

find()方法

find()方法用于获取匹配元素的所有后代元素，包含直接子元素、孙子元素、曾孙子元素直至最底层子元素，需传入指定选择器筛选目标元素，不传入选择器时无返回结果，与parents()方法相对应，是jQuery DOM遍历中范围最广的后代查找方法。

语法

$(selector).find(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery find()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .parent { padding: 10px; border: 2px solid #000; }
        .child { padding: 5px; margin: 5px 0; border: 1px solid #f00; }
        .grandchild { padding: 3px; border: 1px solid #0f0; margin: 3px 0; }
    </style>
</head>
<body>
    <div class="parent" id="target">
        父元素
        <div class="child">直接子元素1
            <div class="grandchild">孙子元素1</div>
        </div>
        <div class="child">直接子元素2
            <div class="grandchild">孙子元素2</div>
            <div class="grandchild">孙子元素3</div>
        </div>
    </div>

    <script>
        // 获取所有后代中的.grandchild类元素
        var grandchildElem = $("#target").find(".grandchild");
        grandchildElem.css("background-color", "#ffe485");
    </script>
</body>
</html>

兄弟遍历

兄弟遍历是jQuery DOM遍历中定位元素同级节点的操作，核心方法包括siblings()、next()/prev()、nextAll()/prevAll()，可分别实现所有兄弟、相邻兄弟、所有后续/前置兄弟元素的查找，满足不同场景下的同级元素操作需求，是jQuery DOM遍历的重要组成部分。

siblings()方法

siblings()方法用于获取匹配元素的所有同级兄弟元素，不包含元素自身，可通过选择器筛选指定类型的兄弟元素，是jQuery DOM遍历中获取所有同级元素的便捷方法。

语法

// 获取所有兄弟元素
$(selector).siblings();

// 筛选指定选择器的兄弟元素
$(selector).siblings(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery siblings()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { padding: 10px; margin: 5px 0; border: 1px solid #000; }
        .active { background-color: #ffe485; }
    </style>
</head>
<body>
    <div class="box">兄弟元素1</div>
    <div class="box" id="target">目标元素</div>
    <div class="box">兄弟元素2</div>
    <div class="box special">特殊兄弟元素</div>

    <script>
        // 获取目标元素的所有兄弟元素
        var allSiblings = $("#target").siblings();
        allSiblings.addClass("active");

        // 筛选指定类名的兄弟元素
        var specialSibling = $("#target").siblings(".special");
        specialSibling.css("border-color", "#f00");
    </script>
</body>
</html>

next()与prev()方法

next()方法用于获取匹配元素的下一个相邻兄弟元素，prev()方法用于获取匹配元素的上一个相邻兄弟元素，两种方法均仅返回一个相邻兄弟元素，若不存在对应相邻元素则返回空jQuery对象，是jQuery DOM遍历中获取相邻同级元素的核心方法。

语法

// 获取下一个相邻兄弟元素
$(selector).next();

// 获取上一个相邻兄弟元素
$(selector).prev();

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery next()与prev()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { padding: 10px; margin: 5px 0; border: 1px solid #000; }
        .next-box { background-color: #e6f7ff; }
        .prev-box { background-color: #fff2e6; }
    </style>
</head>
<body>
    <div class="box">上一个兄弟元素</div>
    <div class="box" id="target">目标元素</div>
    <div class="box">下一个兄弟元素</div>

    <script>
        // 获取下一个相邻兄弟元素
        var nextElem = $("#target").next();
        nextElem.addClass("next-box");

        // 获取上一个相邻兄弟元素
        var prevElem = $("#target").prev();
        prevElem.addClass("prev-box");
    </script>
</body>
</html>

nextAll()与prevAll()方法

nextAll()方法用于获取匹配元素后面所有的同级兄弟元素，prevAll()方法用于获取匹配元素前面所有的同级兄弟元素，两种方法均返回包含所有对应兄弟元素的jQuery对象，可通过选择器筛选指定类型的元素，是jQuery DOM遍历中获取批量同级元素的方法。

语法

// 获取后面所有同级兄弟元素
$(selector).nextAll();

// 获取前面所有同级兄弟元素
$(selector).prevAll();

// 筛选指定选择器的兄弟元素
$(selector).nextAll(selector);
$(selector).prevAll(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery nextAll()与prevAll()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { padding: 10px; margin: 5px 0; border: 1px solid #000; }
        .next-all { background-color: #e6f7ff; }
        .prev-all { background-color: #fff2e6; }
    </style>
</head>
<body>
    <div class="box">前面兄弟1</div>
    <div class="box">前面兄弟2</div>
    <div class="box" id="target">目标元素</div>
    <div class="box">后面兄弟1</div>
    <div class="box">后面兄弟2</div>

    <script>
        // 获取前面所有同级兄弟元素
        var prevAllElem = $("#target").prevAll();
        prevAllElem.addClass("prev-all");

        // 获取后面所有同级兄弟元素
        var nextAllElem = $("#target").nextAll();
        nextAllElem.addClass("next-all");
    </script>
</body>
</html>

过滤遍历

过滤遍历是jQuery DOM遍历中对已获取的元素集合进行筛选的操作，核心方法包括first()、last()、eq()、filter()、not()，可根据索引、条件等筛选出目标元素，进一步精准定位DOM节点，完善jQuery DOM遍历的功能闭环。

first()与last()方法

first()方法用于获取元素集合中的第一个元素，last()方法用于获取元素集合中的最后一个元素，两种方法均返回单个元素，无需传入参数，是jQuery DOM遍历中最简单的索引筛选方法。

语法

// 获取元素集合中的第一个元素
$(selector).first();

// 获取元素集合中的最后一个元素
$(selector).last();

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery first()与last()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { padding: 10px; margin: 5px 0; border: 1px solid #000; }
        .first-box { background-color: #e6f7ff; }
        .last-box { background-color: #fff2e6; }
    </style>
</head>
<body>
    <div class="box">元素1</div>
    <div class="box">元素2</div>
    <div class="box">元素3</div>
    <div class="box">元素4</div>

    <script>
        // 获取第一个元素
        var firstElem = $(".box").first();
        firstElem.addClass("first-box");

        // 获取最后一个元素
        var lastElem = $(".box").last();
        lastElem.addClass("last-box");
    </script>
</body>
</html>

eq()方法

eq()方法用于获取元素集合中指定索引位置的元素，索引从0开始计数，传入正整数表示从前往后计数，传入负整数表示从后往前计数，返回单个元素，是jQuery DOM遍历中精准索引筛选的核心方法。

语法

$(selector).eq(index);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery eq()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { padding: 10px; margin: 5px 0; border: 1px solid #000; }
        .target-box { background-color: #ffe485; border-color: #f00; }
    </style>
</head>
<body>
    <div class="box">元素1（索引0）</div>
    <div class="box">元素2（索引1）</div>
    <div class="box">元素3（索引2）</div>
    <div class="box">元素4（索引3）</div>

    <script>
        // 获取索引为1的元素（第二个元素）
        var eqElem1 = $(".box").eq(1);
        eqElem1.addClass("target-box");

        // 获取索引为-1的元素（最后一个元素）
        var eqElem2 = $(".box").eq(-1);
        eqElem2.css("font-weight", "bold");
    </script>
</body>
</html>

filter()与not()方法

filter()方法用于筛选出符合指定条件的元素，保留元素集合中满足条件的元素；not()方法与filter()方法相反，用于筛选出不符合指定条件的元素，排除元素集合中满足条件的元素，两种方法均可传入选择器或函数作为筛选条件，是jQuery DOM遍历中灵活的条件筛选方法。

语法

// 筛选符合选择器的元素
$(selector).filter(selector);

// 筛选符合函数条件的元素
$(selector).filter(function(index) {
    // 筛选逻辑，返回true保留元素，false排除元素
});

// 排除符合选择器的元素
$(selector).not(selector);

// 排除符合函数条件的元素
$(selector).not(function(index) {
    // 筛选逻辑，返回true排除元素，false保留元素
});

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery filter()与not()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { padding: 10px; margin: 5px 0; border: 1px solid #000; }
        .filter-box { background-color: #e6f7ff; }
        .not-box { background-color: #fff2e6; }
    </style>
</head>
<body>
    <div class="box">元素1</div>
    <div class="box special">元素2（特殊）</div>
    <div class="box">元素3</div>
    <div class="box special">元素4（特殊）</div>

    <script>
        // 筛选出.special类的元素
        var filterElem = $(".box").filter(".special");
        filterElem.addClass("filter-box");

        // 排除.special类的元素
        var notElem = $(".box").not(".special");
        notElem.addClass("not-box");

        // 用函数筛选索引为偶数的元素
        var filterFunc = $(".box").filter(function(index) {
            return index % 2 === 0;
        });
        filterFunc.css("font-weight", "bold");
    </script>
</body>
</html>

jQuery版本中DOM遍历方法的变化

以下表格汇总了jQuery DOM遍历核心方法在不同jQuery版本中的核心变化，便于开发者根据项目所使用的jQuery版本调整代码，确保jQuery DOM遍历操作的兼容性与稳定性。

方法名称版本变化说明
parent()/parents()jQuery 1.0 版本引入，支持基础的祖先元素查找；jQuery 1.2 版本新增支持传入选择器筛选祖先元素；jQuery 1.9 版本修复了parents()方法筛选根元素时的兼容性问题，优化了jQuery DOM遍历的稳定性。
closest()jQuery 1.3 版本新增，初始支持选择器筛选；jQuery 1.4 版本优化了查找效率，新增支持自身元素匹配；jQuery 1.9 版本修复了查找隐藏元素时的bug，成为jQuery DOM遍历中最常用的祖先查找方法之一。
children()/find()jQuery 1.0 版本引入children()方法，jQuery 1.1 版本引入find()方法；jQuery 1.2 版本为两种方法新增选择器筛选功能；jQuery 1.7 版本优化了find()方法的性能，提升了大规模DOM树中jQuery DOM遍历的效率。
siblings()/next()/prev()jQuery 1.0 版本引入三种方法，初始仅支持基础的兄弟元素查找；jQuery 1.2 版本新增选择器筛选功能；jQuery 1.4 版本优化了siblings()方法的性能，避免冗余元素的获取，完善jQuery DOM遍历的同级查找能力。
nextAll()/prevAll()jQuery 1.2 版本新增，支持获取所有后续/前置兄弟元素；jQuery 1.4 版本新增选择器筛选功能；jQuery 1.6 版本优化了索引计算逻辑，修复了负索引查找时的偏差问题，提升jQuery DOM遍历的精准度。
first()/last()/eq()jQuery 1.1 版本引入三种方法；jQuery 1.4 版本为eq()方法新增负索引支持，可从后往前计数；jQuery 1.9 版本优化了三种方法的返回值处理，确保始终返回jQuery对象，兼容后续链式调用，适配jQuery DOM遍历的连贯操作。
filter()/not()jQuery 1.0 版本引入两种方法，初始支持选择器筛选；jQuery 1.4 版本新增支持函数作为筛选条件，增强筛选灵活性；jQuery 1.9 版本修复了函数筛选时索引计算的bug，优化了jQuery DOM遍历的条件筛选逻辑。

jQuery DOM遍历通过祖先、后代、兄弟、过滤四大类方法，构建了完整的DOM元素查找体系，这些方法简洁高效、兼容性强，可根据实际需求灵活组合使用，熟练掌握jQuery DOM遍历的核心方法，能有效提升DOM元素操作的效率与精准度，是jQuery开发的核心技能之一。

最新发布