<body>

<div id="main">

    <div id="hot" class="rightbar">

        <h2>热门推荐</h2>

        <ul>

            <li>

                <ul>

                    <li class="p">融氏橄榄油</li>

                    <li>帮宝适纸尿裤</li>

                    <li id="h">有机大米</li>

                    <li>妙洁垃圾袋</li>

                    <li>优乐美奶茶</li>

                    <li class="m">亲亲果冻</li>

                </ul>

            </li>

            <li>

                <ul>

                    <li>海飞丝洗头膏</li>

                    <li>六神花露水</li>

                    <li>舒肤佳香皂</li>

                    <li>心相印纸巾</li>

                    <li>哇哈哈矿泉水</li>

                    <li>王老吉</li>

                </ul>

            </li>

        </ul>

    </div>

</div>

</body>
<script type="text/javascript" language="javascript">

//此处为jQuery代码

</script>

测试1：测试next，让id="h"的li元素（有机大米）的下一个弟弟高亮

$("#h").next().css("background-color","red");

效果：

测试2：测试nextAll，让id="h"的li元素（有机大米）的所有弟弟高亮

$("#h").nextAll().css("background-color","red");

效果：

测试3：测试nextUntil，让id="h"的li元素（有机大米）的所有弟弟高亮，直到碰到类名是m的元素终止

$("#h").nextUntil(".m").css("background-color","red");

效果：

prev与next是一样的，只不过一个是哥哥，一个是弟弟，同样的prevAll和nextAll，prevUntil和nextUntil也基本一样，不再重复测试

测试4：测试siblings，让id="h"的li元素（有机大米）的所有兄弟都高亮（包括哥哥和弟弟）

$("#h").siblings().css("background-color","red");

效果：

测试5：测试siblings，让id="h"的li元素（有机大米）的所有兄弟中符合类名是m的高亮

$("#h").siblings(".m").css("background-color","red");

效果：

个人控制显示隐藏实例：

$(".ziyuanmingtit").each(function () {
$(this).click(function () {
if ($(this).siblings(".zyhih").css("display") == "none") {
$(this).siblings(".zyhih").css("display", "block");
} else {
$(this).siblings(".zyhih").css("display", "none");
}
});
});

<div class="ziyuanming ziyuanmingtit"><a>@item.DContent.Title</a></div>
<div class="ziyuanda">@item.DContent.AddDate.ToString("yyyy-MM-dd")</div>
<div class="zyhih">
<span class="prepre">推荐理由：</span><div class="ppcot">@item.DContent.CustomField09</div>
<span class="prepre">馆员回复：</span><div class="ppcot">@item.DContent.CustomField10</div>

<div>

效果是点击标题,如果看不见容器zyhih，则让其显现；再次点击标题，如果zyhih为显示的，就让它隐藏；

类似的点击控制显示隐藏的例子：

<script>
$(function () {
$(".showbo").each(function () {
$(this).click(function () {
if ($(this).next().css("display") == "none") {
$(this).next().css("display", "block");
} else {
$(this).next().css("display", "none");
}
});
});
})
</script>
<div class="showbo">
<a href="javascript:void(0)" title="@item.DContent.Title">
<span>@(++i)、</span>
@(new HtmlString(GetSubString(item.DContent.Title, 62)))
</a>
<span class="time">@item.DContent.AddDate.ToString("yyyy-MM-dd")</span>
</div>
<div class="qusans"><span class="qpre">解疑:</span>@item.DContent.Summary</div>

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()的更多相关文章

  1. siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() 在 DOM 树中水平遍历

    $(document).ready(function(){ $("h2").siblings(); });拿到h2标签的所有的同级元素什么标签都可以 $(document).rea ...

  2. jquery 找同胞系列siblings() ,next() ,nextAll(), nextUntil(), prev(), prevAll(), prevUntil()

    注:expr是指可选的参数,包含用于匹配元素的选择器表达式. .siblings(expr) ---查找所有兄弟(包括哥哥和弟弟) .next(expr) ---查找紧挨着的弟弟 .nextAll(e ...

  3. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  4. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  5. jquery next nextAll nextUntil siblings的区别

    next:紧挨着$('')的一个元素 nextAll:在$('')以后的所有的同辈元素 nextUntil:until有直到...之前的意思,所以他表示$('')以后的所有的同辈元素,不过要在next ...

  6. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. Jquery-获取同级标签prev,prevAll,next,nextAll

    1.next([expr]): 获取指定元素的下一个同级元素(注意是下一个同级元素哦) 参数可有可无,参数设定遵循jquery选择器规则 <!DOCTYPE html> <html& ...

  8. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  9. jquery获取兄弟元素

    按照w3c school的指引,jquery中,要获得一个元素的兄弟,可以用 prev().next()两种方法.顾名思义,prev()获得前一个,next()获得后面一个. 问题是,如果存在前后兄弟 ...

随机推荐

  1. Eclipse 启动Tomcat 超时报错的解决方案

    在用eclipse开发项目  用tomcat发布项目的时候  会提示超时, Server Tomcat v7.0 Server at localhost was unable to start wit ...

  2. TCP/IP详解--TCP首部选项中时间戳选项

    一.简介 TCP时间戳选项会在TCP包头增加12个字节,以一种比重发超时更精确的方法来启用对RTT 的计算.   二.作用 ) TCP时间戳位于TCP选项中,kind=:lenth=:data由tim ...

  3. uva 699 the falling leaves——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3QAAAMsCAIAAACTL3d2AAAgAElEQVR4nOx9y7GuPA4tKRADk/92T8 ...

  4. 作为一个测试leader平时应该注意哪些方面

    平时对管理方面很少有总结,总觉得管理是一门艺术,一门需要意会的艺术,虽然目前在做测试leader,平时也看些管理方面的书,但实际中总感觉理解的不够透彻,在工作上实施的话会有各种各样的情况,想要做好管理 ...

  5. java在url传输前更改字符编码

    几种方式 1. String s = "sds"; s = new String(data_id.getBytes("UTF-8")); 2. 使用get请求 ...

  6. [转]MySQL数据库的优化-运维架构师必会高薪技能，笔者近六年来一线城市工作实战经验

    本文转自:http://liangweilinux.blog.51cto.com/8340258/1728131 年,嘿,废话不多说,下面开启MySQL优化之旅! 我们究竟应该如何对MySQL数据库进 ...

  7. 【转载】eclipse插件安装

    原文:http://blog.csdn.net/dylan619/article/details/46839941 原来的eclipse3.7安装了太多插件后,m2e怎么也安装不成功,因此今天重新下载 ...

  8. POJ 2653 Pick-up sticks --队列，几何

    题意: 按顺序扔木棒,求出最上层的木棒是哪些. 解法: 由于最上层的木棒不超过1000个,所以用一个队列存储最上层的木棒,每次扔出一个木棒后,都与队列中的木棒一一判断,看此木棒是否在某一最上层的木棒的 ...

  9. Windows系统安装Oracle 11g数据库

    一.下载 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html以下两网址来源此官方下载页 ...

  10. SqlMapConfig.xml中的setting属性设置

    <settings     cacheModelsEnabled="true"     lazyLoadingEnabled="false"     en ...