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 setTimeout()函数使用方法
Apr 07 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
微信小程序实现可长按移动控件
Nov 01 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
使用javascript获取页面名称
2014/12/23 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
微信小程序实现图片压缩功能
2018/01/26 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python中return不返回值的问题解析
2020/07/22 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
高中自我评价分享
2013/12/05 职场文书
房地产促销活动方案
2014/03/01 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
实习单位意见
2015/06/04 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL