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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
JQuery教学之性能优化
May 14 Javascript
js清空form表单中的内容示例
May 20 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
详解babel升级到7.X采坑总结
May 12 Javascript
小程序表单认证布局及验证详解
Jun 19 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与XML的PDF文档生成技术
2006/10/09 PHP
用PHP实现小型站点广告管理
2006/10/09 PHP
一个PHP分页类的代码
2011/05/18 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PDO::errorInfo讲解
2019/01/28 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python基础教程之常用运算符
2014/08/29 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python 线程池用法简单示例
2019/10/02 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
体育口号大全
2014/06/18 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Python 键盘事件详解
2021/11/11 Python