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实现的页内搜索代码
May 23 Javascript
Prototype Array对象 学习
Jul 19 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
JQuery 常用操作代码
2010/03/14 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python实现的tab文件操作类分享
2014/11/20 Python
python查询sqlite数据表的方法
2015/05/08 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
奥巴马当选演讲稿
2014/09/10 职场文书
营销计划书范文
2015/01/17 职场文书
听课评课活动心得体会
2016/01/15 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
Python中字符串对象语法分享
2022/02/24 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技