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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
js作用域和作用域链及预解析
Apr 11 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP strtotime函数详解
2009/12/18 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
利用jquery操作Radio方法小结
2014/10/20 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python和Sublime整合过程图示
2019/12/25 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
设备收款委托书范本
2014/10/02 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
学校就业保障协议书
2019/06/24 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js