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操作二级联动实现代码
Jul 27 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
vue引用js文件的多种方式(推荐)
May 17 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
python实现将元祖转换成数组的方法
2015/05/04 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python数据化运营的重要意义
2019/11/25 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
创建市级文明单位实施方案
2014/03/01 职场文书
校庆接待方案
2014/03/18 职场文书
党员作风建设整改方案
2014/10/27 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书