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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
js的回调函数详解
Jan 05 Javascript
chrome调试javascript详解
Oct 21 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
javascript数组去重小结
Mar 07 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
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/02 无线电
那些年一起学习的PHP(二)
2012/03/21 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python写入文件自动换行问题的方法
2019/07/05 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
员工晚婚的请假条
2014/02/08 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
环境工程专业自荐信
2014/03/03 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
婚礼答谢词范文
2015/09/29 职场文书
详解Vue router路由
2021/11/20 Vue.js
Python保存并浏览用户的历史记录
2022/04/29 Python