jquery遍历函数siblings()用法实例


Posted in Javascript onDecember 24, 2015

本文实例讲述了jquery遍历函数siblings()用法。分享给大家供大家参考,具体如下:

siblings([expr])

得到所有匹配元素集合中各个元素的所有兄弟元素集合。返回匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
 <script src="jquery.js"></script>
 <script>
 $(document).ready(function(){
  var len = $(".hilite").siblings().css("color", "red").length;
  $("b").text(len);
 });
 </script>
 <style>
 ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
 p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
   font-weight:bolder; }
 .hilite { background:yellow; }
</style>
</head>
<body>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li class="hilite">Three</li>
  <li>Four</li>
 </ul>
 <ul>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
 </ul>
 <ul>
  <li>Eight</li>
  <li class="hilite">Nine</li>
  <li>Ten</li>
  <li class="hilite">Eleven</li>
 </ul>
 <p>Unique siblings: <b></b></p>
</body>
</html>
$(".hilite").siblings()

将得到包含特殊样式‘hilite'元素的所有兄弟元素集合。以下是匹配元素集合

<li>One</li>
<li>Two</li>
<li>Four</li>
<li>Eight</li>
<li class="hilite">Nine</li>
<li>Ten</li>
<li class="hilite">Eleven</li>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
易被忽视的js事件问题总结
May 14 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
jQuery中的siblings用法实例分析
Dec 24 #Javascript
JQuery标签页效果实例详解
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 #Javascript
JQuery实现Ajax加载图片的方法
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 #Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 #Javascript
正则表达式优化JSON字符串的技巧
Dec 24 #Javascript
You might like
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python玩转Excel的读写改实例
2019/02/22 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
写一个方法1000的阶乘
2012/11/21 面试题
店长助理岗位职责
2013/12/13 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
工程安全员岗位职责
2014/03/09 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js