jQuery siblings()用法实例详解


Posted in Javascript onApril 26, 2016

siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

jQuery 的遍历方法siblings()

$("给定元素").siblings(".selected")

其作用是筛选给定的同胞同类元素(不包括给定元素本身)

例子:网页选项栏

当点击任意一个选项卡是,其他2个选项卡就会改变样式,其内容也会隐藏。

jQuery siblings()用法实例详解

下面是html代码。

<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎您来到电器城</li>
<li>二手市场,产品丰富多彩</li>
</ul>
</body>

jQuery代码

<script type="text/javascript">
$(function() {
$("#menu li").each(function(index) { //带参数遍历各个选项卡
$(this).click(function() { //注册每个选卡的单击事件
$("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
$(this).addClass("tabFocus"); //增加当前选中项的样式
//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" + index + ")").show()
.siblings().hide();//#menu与#content在html层没有嵌套关联,但因为其ul序列相同,用index值可以巧妙的将两者关联。
});
});
})
</script>

其中

jQuery siblings()用法实例详解

当点击相应的选项卡后,被点击的选项卡内容就会被show()。而其他2个同胞元素<li>选项卡用silibings()筛选出来hide()掉。

这样就能动态的显示点击区域的内容,而隐藏掉另外2个选项卡了。


$("给定元素").siblings(".selected")

中的(".selected")表示筛选给定元素类名为.selected的同胞元素(不包括给定元素自己)

以上内容是针对jQuery siblings()用法实例详解,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 #Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 #Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 #Javascript
Bootstrap网格系统详解
Apr 26 #Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 #Javascript
Bootstrap按钮组件详解
Apr 26 #Javascript
Bootstrap每天必学之警告框插件
Apr 26 #Javascript
You might like
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
javascript中的继承实例代码
2011/04/27 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python实现比较文件内容异同
2018/06/22 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
SQL Server数据库笔试题和答案
2016/02/04 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
final, finally, finalize的区别
2012/03/01 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
学校门卫管理制度
2014/01/30 职场文书
2015年药房工作总结
2015/04/25 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
索尼ICF-5900W收音机测评
2022/04/24 无线电