jquery遍历函数siblings()用法实例

 更新时间:2015年12月24日 10:18:22   作者:cui_angel  
这篇文章主要介绍了jquery遍历函数siblings()用法,结合实例形式较为详细的分析了jquery的siblings函数用于元素遍历的相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • jquery中load方法的用法及注意事项说明

    jquery中load方法的用法及注意事项说明

    本篇文章主要是对jquery中load方法的用法及注意事项进行了详细介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jquery无法设置checkbox选中即没有变成选中状态

    jquery无法设置checkbox选中即没有变成选中状态

    设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文
    2014-03-03
  • jQuery的几种选择器及实例详解

    jQuery的几种选择器及实例详解

    这篇文章主要介绍了jQuery的几种选择器详解,Query 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素, 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器,需要的朋友可以参考下
    2023-05-05
  • 提取jquery的ready()方法单独使用示例

    提取jquery的ready()方法单独使用示例

    有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了
    2014-03-03
  • jQuery UI菜单部件Menu Widget

    jQuery UI菜单部件Menu Widget

    这篇文章介绍了jQuery UI菜单部件Menu Widget,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 一个基于jQuery的树型插件(OrangeTree)使用介绍

    一个基于jQuery的树型插件(OrangeTree)使用介绍

    这个样式大家就将就一下吧!我将这个无限级树型插件命名为桔子树,需要的朋友可以参考下
    2012-05-05
  • jQuery判断checkbox是否选中的小例子

    jQuery判断checkbox是否选中的小例子

    判断checkbox是否选中的方法有很多,不过都是大同小异,下面为大家介绍下使用jquery是如何做到的,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12
  • 全面解析标签页的切换方式

    全面解析标签页的切换方式

    这篇文章主要介绍了标签页的切换方式,介绍的非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 使用jquery.form.js实现图片上传的方法

    使用jquery.form.js实现图片上传的方法

    这篇文章主要介绍了使用jquery.form.js实现图片上传的方法,涉及jquery使用表单插件jquery.form.js进行图片上传的提交、类型验证、执行结果回调显示等技巧,非常简单实用,需要的朋友可以参考下
    2016-05-05
  • jQuery+ThinkPHP实现图片上传

    jQuery+ThinkPHP实现图片上传

    这篇文章主要为大家详细介绍了jQuery+ThinkPHP实现图片上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07

最新评论