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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php操作access数据库的方法详解
2017/02/22 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
python文件与目录操作实例详解
2016/02/22 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python 重定向获取真实url的方法
2018/05/11 Python
python简单操作excle的方法
2018/09/12 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
商铺门前三包责任书
2014/07/25 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
云冈石窟导游词
2015/02/04 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
校车司机安全责任书
2015/05/11 职场文书
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers