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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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安装memcached扩展笔记
2015/05/28 PHP
php递归函数怎么用才有效
2018/02/24 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python字典改变value值方法总结
2019/06/21 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python中dict使用方法详解
2019/07/17 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
办公室主任岗位承诺书
2014/05/29 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
SQL Server内存机制浅探
2022/04/06 SQL Server