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 相关文章推荐
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 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
几种显示数据的方法的比较
2006/10/09 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
json简单介绍
2008/06/10 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
js实现交通灯效果
2017/01/13 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
python中Genarator函数用法分析
2015/04/08 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
计算机操作自荐信
2013/12/07 职场文书
行政专员岗位职责
2014/01/02 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Python语言内置数据类型
2022/02/24 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android