jQuery中获取兄弟元素的方法

最新推荐文章于 2023-09-29 02:14:31 发布

杏黄的三叶草

最新推荐文章于 2023-09-29 02:14:31 发布

阅读量1.8k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/dwjdj/article/details/105918195

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了如何使用jQuery来获取元素的兄弟元素，重点是获取前一个兄弟元素的实践案例。

摘要由CSDN通过智能技术生成

获取该元素的前一个兄弟元素

 $(this).prev().css("backgroundColor","red");
 获取该元素的下一个兄弟元素
 $(this).next().css("backgroundColor","red");
 获取该元素后面的所有兄弟元素
 $(this).nextAll().css("backgroundColor","red");
 获取该元素前面的所有兄弟元素
 $(this).prevAll().css("backgroundColor","red");
 获取该元素所有兄弟元素
 $(this).siblings().css("backgroundColor","red");

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        /*
        * 断链:对象调用方法后，返回的已不是当前的这个对象，此时再调用方法，就出现了断链的现象
        * .end()方法是用来修复断链，恢复断链之前的状态
        * 如果出现了断链，就不推荐使用链式编程
        * */
        $(function () {
            $("ul>li").click(function () {
                // $(this).nextAll("li").css("backgroundColor","blue");
                // $(this).prevAll("li").css("backgroundColor","green");
                $(this).nextAll("li").css("backgroundColor","blue").end().prevAll("li").css("backgroundColor","green");
            }).mouseenter(function () {
                $(this).css("backgroundColor","red");
            }).mouseleave(function () {
                $(this).parent().find("li").css("backgroundColor","");
            });
        });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>

</body>
</html>