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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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脚本的10个技巧(3)
2006/10/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
json跟xml的对比分析
2008/06/10 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python引用模块和查找模块路径
2016/03/17 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
结构和类有什么异同
2012/07/16 面试题
外语系毕业生自荐信范文
2013/12/16 职场文书
暑期研修感言
2014/02/17 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
党员民主生活会材料
2014/12/15 职场文书
公司开会通知
2015/04/20 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
ubuntu下常用apt命令介绍
2022/06/05 Servers