jQuery 遍历

最新推荐文章于 2024-07-19 03:08:33 发布

夜丶光

最新推荐文章于 2024-07-19 03:08:33 发布

阅读量243

点赞数

分类专栏： web前端文章标签： jQuery-遍历

本文链接：https://blog.csdn.net/lcconsider/article/details/62864224

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.向上遍历

parent()
说明：找到与本级元素标签名不同的上一级父元素
parents()
说明：找到所有的父元素（直到根）

2.向下遍历

children()
说明：返回子一代中符合条件的所有元素
find()
说明：在所有后代中找符合条件的所有元素

3.平级遍历

siblings()
说明：被选元素的所有兄弟元素
next()
说明：被选元素的下一个兄弟元素，若子元素含有与该元素相同的标签，则选中第一个相同标签的子元素
nextAll()
说明：被选元素的之后的所有兄弟元素
prev()
说明：被选元素的上一个兄弟元素
prevAll()
说明：被选元素的之前的所有兄弟元素

4.查找

eq()
说明：返回指定下标的元素（从0开始）
filter()
说明：返回符合条件的所有元素
not()
说明：返回不符合条件的所有元素

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery 遍历</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $("#test_parent1").parent().css("border","1px solid red");
                $("#test_parent2").parent().css("border","1px solid blue");
                $("#test_children1").children().css("background-color","yellow");
                $("#test_children2").find("#aim").css("background-color","green");
                $("#text_next1").next().css("background-color","pink");
                $("#text_next2").next().css("background-color","purple");
                $("#text_prev").prev().css("background-color","brown");
            });
        </script>
    </head>
    <body>
        <div>
            <h2>向上遍历</h2>
            <h4>parent()</h4>
            <div>A-div
                <p>B-p
                    <span id="test_parent1" style="display:block">C-span（当前元素）</span>
                </p>
            </div>
            <br/>
            <div>A-div
                <p>B-p
                    <p>C-p
                        <p id="test_parent2">D-p（当前元素）</p>
                    </p>
                </p>
            </div>
            <br/>
        </div>
        <hr/>
        <div>
            <h2>向下遍历</h2>
            <h4>children()</h4>
            <div id="test_children1">A-div（当前元素）
                <p>B1-p
                    <span style="display:block">C-span</span>
                </p>
                <ul>B2-ul
                    <span style="display:block">C-span</span>
                </ul>
            </div>
            <br/>
            <h4>find()</h4>
            <div id="test_children2">A-div（当前元素）
                <p>B1-p
                    <span style="display:block" id="aim">C-span</span>
                </p>
                <ul>B2-ul
                    <span style="display:block">C-span</span>
                </ul>
            </div>
        </div>
        <hr/>
        <div>
            <h2>平级遍历</h2>
            <h4>next()</h4>
            <div>A-div
                <p>B1-p</p>
                <p id="text_next1">B2-p（当前元素）
                    <span style="display:block">C1-span</span>
                    <p>C2-p</p>
                </p>
                <span style="display:block">B3-span</span>
                <p>B4-p</p>
            </div>
            <br/>
            <div>A-div
                <p>B1-p</p>
                <p id="text_next2">B2-p（当前元素）
                    <span style="display:block">C-span</span>
                </p>
                <span style="display:block">B3-span</span>
                <p>B4-p</p>
            </div>
            <h4>prev()</h4>
            <div>A-div
                <p>B1-p</p>
                <p>B2-p
                    <span style="display:block">C-span</span>
                </p>
                <span style="display:block" id="text_prev">B3-span（当前元素）</span>
                <p>B4-p</p>
            </div>
        </div>
    </body>
</html>