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实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
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校验ISBN码的函数代码
2011/01/17 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python对象与json相互转换的方法
2019/05/07 Python
通过python检测字符串的字母
2020/02/18 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
投标邀请书范本
2015/02/02 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Matlab如何实现矩阵复制扩充
2021/06/02 Python