购物车
登陆 / 注册
微信扫码登陆

推荐手册

jQuery siblings() 方法

jQuery siblings() 方法
siblings() 方法返回被选元素的所有同级元素
编辑:蹊下 蹊下 更新时间:2019-03-02 15:28:56

jQuery siblings() 方法

定义和用法

siblings() 方法返回被选元素的所有同级元素。

同级元素是共享相同父元素的元素。

DOM 树:该方法沿着 DOM 元素的同级元素向前和向后遍历。

提示:请使用 prev() 或 next() 方法来缩小仅仅搜索前一个同级元素或后一个同级元素的范围。

语法

$(selector).siblings(filter)
参数描述
filter 可选。规定缩小搜索同级元素范围的选择器表达式。

实例

<style>
.siblings *{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("li.start").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
    <ul>ul (父节点)  
        <li>li (类名为"star"的上一个兄弟节点)</li>
        <li>li (类名为"star"的上一个兄弟节点)</li>
        <li class="start">li (兄弟节点)</li>
        <li>li (类名为"star"的下一个兄弟节点)</li>
        <li>li (类名为"star"的下一个兄弟节点)</li>
    </ul>   
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号