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 相关文章推荐
chrome下img加载对height()的影响示例探讨
May 26 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
理解javascript正则表达式
Mar 08 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
原生js实现照片墙效果
Oct 13 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调用Webservice实例代码
2011/07/29 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
javascript实现连续赋值
2015/08/10 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
pandas对指定列进行填充的方法
2018/04/11 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python循环结构的应用场景详解
2019/07/11 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
求职自荐信
2013/12/14 职场文书
工作违纪检讨书
2014/02/17 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
紫日观后感
2015/06/05 职场文书
上班旷工检讨书
2015/08/15 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
建房合同协议书
2016/03/21 职场文书