jQuery 的遍历方法siblings()

$("给定元素").siblings(".selected")

其作用是筛选给定的同胞同类元素（不包括给定元素本身）

例子：网页选项栏

当点击任意一个选项卡是，其他2个选项卡就会改变样式，其内容也会隐藏。

下面是html代码。

<body>

     <ul id="menu">

         <li class="tabFocus">家居</li>

         <li>电器</li>

         <li>二手</li>

     </ul>

     <ul id="content">

         <li class="conFocus">我是家居的内容</li>

         <li>欢迎您来到电器城</li>

         <li>二手市场，产品丰富多彩</li>

     </ul>

</body>

jQuery代码

<script type="text/javascript">

        $(function() {

            $("#menu li").each(function(index) { //带参数遍历各个选项卡

                $(this).click(function() { //注册每个选卡的单击事件

                    $("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式

                    $(this).addClass("tabFocus"); //增加当前选中项的样式

                    //显示选项卡对应的内容并隐藏未被选中的内容

                    $("#content li:eq(" + index + ")").show()

                    .siblings().hide();//#menu与#content在html层没有嵌套关联，但因为其ul序列相同，用index值可以巧妙的将两者关联。

                });

            });

        })

    </script>

其中

当点击相应的选项卡后，被点击的选项卡内容就会被show（）。而其他2个同胞元素<li>选项卡用silibings()筛选出来hide()掉。

这样就能动态的显示点击区域的内容，而隐藏掉另外2个选项卡了。

而

$("给定元素").siblings(".selected")

中的(".selected")表示筛选给定元素类名为.selected的同胞元素（不包括给定元素自己）

jQuery siblings()用法与实例。的更多相关文章

  1. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  2. JQuery datepicker 用法

    JQuery datepicker 用法   jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...

  3. jquery cookie用法

    jquery cookie用法(获取cookie值,删除cookie) cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使 ...

  4. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

  5. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  6. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  7. jquery cookie 用法

    jquery cookie 用法 $.cookie("name","value","options")  当不设置options时,此coo ...

  8. jquery.cookie用法详细解析，封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  9. jquery.post用法补充(type设置问题)

    jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...

随机推荐

  1. Spring源码入门——XmlBeanDefinitionReader解析

    接上篇[] ,我们看到BeanDefinitionReader解决的是从资源文件(xml,propert)到BeanDefinition集合的过程.所以BeanDefinitionReader接口有两 ...

  2. 用lambda构建ORM查询语句

    本文介绍如何解析lambda表达式来获取一个满足条件的查询语句. 先看个截图  通过设置实体对象Article_Content的查询表达式,就可以获取对应的参数化SQL语句,使用起来很方便,减少了代码 ...

  3. Wix#可以直接写C#代码来生成Wix的MSI安装文

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Wix#可以直接写C#代码来生成Wix的MSI安装文.

  4. MongoDB--使用修改器修改文档

    可以使用修改器啦修改文档,比如增加.删除文档的键值.使用修改器首先要定位到某个文档, 然后再增加相应的修改选项,需要使用update语句 1.$inc修改器修改文档 > db.users.fin ...

  5. An existing PostgreSql installation has been found... 的解决

    PostgreSql卸载之后,重新安装时跳出如下信息: Anexisting PostgreSql installation has been found atC:\ProgramFiles\Post ...

  6. cocos2d-x 2.0 拖尾效果分析

    转自:http://game.dapps.net/gamedev/game-engine/7281.html 在Cocos2d-x中,拖尾效果有一个专门的类CCMotionStreak来实现.下面我们 ...

  7. Delphi中DLL的其他应用

    http://blog.csdn.net/zhenghui1/article/details/6618273 1.DLL的入口函数和出口函数 在编写DLL时可以在DLL项目文件的begin..end之 ...

  8. [Ember] Creating Your First Ember.js Project with Ember-CLI

    In this lesson, we'll setup Ember-CLI and use it to create and run our first Ember.js project. Insta ...

  9. Android内存、性能是程序永恒的话题

    内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生 ...

  10. autocommit=0

    mysql; Query OK, rows affected (0.00 sec) mysql> create table test( a int); Query OK, rows affect ...