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类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JS backgroundImage控制
May 19 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
javascript拖拽应用实例
Mar 25 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
python字典的常用操作方法小结
2016/05/16 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python清理子进程机制剖析
2017/11/23 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
工业设计专业推荐信
2013/10/29 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
水利学院求职自荐书
2014/02/01 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL