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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
Boostrap入门准备之border box
May 09 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
Django数据库表反向生成实例解析
2018/02/06 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python的concat等多种用法详解
2018/11/28 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
大学班级干部的自我评价分享
2014/02/10 职场文书
中青班党性分析材料
2014/02/16 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
校园元旦活动总结
2014/07/09 职场文书
实习单位推荐信
2015/03/27 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
公证书
2019/04/17 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python