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在光标位置插入内容的实现代码
Jun 18 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 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 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python SocketServer源码深入解读
2019/09/17 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
项目合作计划书
2014/01/09 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
授权委托书范文
2014/07/31 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL