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 相关文章推荐
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
js判断密码强度的方法
Mar 18 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
自己前几天写的无限分类类
2007/02/14 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
制作特殊字的脚本
2006/06/26 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
js分页工具实例
2015/01/28 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
Python教程之全局变量用法
2016/06/27 Python
Python pandas用法最全整理
2019/08/04 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
基于python实现学生信息管理系统
2019/11/22 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
公司财务会计主管应聘求职信
2014/09/26 职场文书
入党介绍人意见范文
2015/06/01 职场文书
工资证明范本
2015/06/12 职场文书