jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例


Posted in Javascript onJanuary 30, 2017

本文实例讲述了jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法。分享给大家供大家参考,具体如下:

siblings()属于jQuery筛选类的API,用来查找某个元素的所有同辈元素(所有兄弟姐妹)。

<div id="contentHolder">
  <input type="button" value="1" id="button1"></input>
  <input type="button" value="2" id="button2"></input>
  <input type="button" value="3" id="button3"></input>
</div>

假如需要实现如下功能:点击某个按钮的时候,该按钮背景色变成#88b828,其他按钮背景色变成#15b494。这个时候,siblings这个API很有用,也很简单。

$(function(){
  $("#contentHolder input[type='button']").click(function(){
    $(this).css("background","#88b828");
    $(this).siblings().css("background","#15b494");
  });
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
layui动态表头的实现代码
Aug 22 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
AngularJS报错$apply already in progress的解决方法分析
Jan 30 #Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 #Javascript
JavaScript Date 知识浅析
Jan 29 #Javascript
JavaScript实现时钟滴答声效果
Jan 29 #Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 #Javascript
jQuery图片轮播功能实例代码
Jan 29 #Javascript
jQuery代码实现实时获取时间
Jan 29 #Javascript
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
物流管理专业应届生求职信
2013/11/21 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
公司年终奖分配方案
2014/06/16 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
个人原因辞职信模板
2015/05/13 职场文书
困难补助申请报告
2015/05/19 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers