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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
AJAX实现省市县三级联动效果
Oct 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
文件上传的实现
2006/10/09 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
python自动点赞功能的实现思路
2020/02/26 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
python中turtle库的简单使用教程
2020/11/11 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
商务主管岗位职责
2013/12/08 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL