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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
js 金额文本框实现代码
Feb 14 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
红米手机抢购的js代码
Mar 10 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
博士208HAF收音机实习报告
2021/03/02 无线电
239军机修复记
2021/03/02 无线电
深入php多态的实现详解
2013/06/09 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
PHP PDO操作总结
2014/11/17 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python 图片去噪的方法示例
2019/07/09 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
人力资源经理自我评价
2014/01/04 职场文书
出生公证书样本
2014/04/04 职场文书
英语感谢信范文
2015/01/20 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
从原生JavaScript到React深入理解
2022/07/23 Javascript