<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. JS高级程序设计2nd部分知识要点3

    对象转换方法:1> toLocaleString(),2> toString(),ValueOf()方法会返回相同的值 栈方法是 LIFO (后进先出)的数据结构 -push ,pop 方 ...

  2. R语言中数据框的横向合并与纵向合并

    #横向合并ID<-c(1,2,3,4)name<-c("Jim","Tony","Lisa","Tom")s ...

  3. php 利用activeMq+stomp实现消息队列

    php 利用activeMq+stomp实现消息队列 一.activeMq概述 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J ...

  4. phpcms v9 下拉菜单 二级 三级子栏目调用方法

    很多网站的导航栏可以实现下拉二级菜单,三级菜单等效果,今天我们就来分享phpcms v9 支持下拉菜单的方法,可以支持无限子栏目调用,具体写法如下: <ul> {pc:content ac ...

  5. 如何快速开发出一个高质量的APP——创业谈

    [起] 今早,一个技术群里有人想快速做出一个app,然后询问技术方案,大概是这样, 拿到了200w投资,期望花20w两个月先做出一个app,包括iOS,Android, 先,呵呵,一下, 大概预估了一 ...

  6. HTML常用文本元素

    HTML是超文本标记语言,它提供网页的具体内容,包括文本.表单.图像.表格.链接.多媒体.列表等.其中文本是我们遇到的最多的展示内容.正确的使用文本标签,会使页面具有语义化,也有利于SEO. 文本标签 ...

  7. Linux 系统常用命令汇总（五） 磁盘管理

    磁盘管理 命令 选项 注解 示例 df [选项] 显示磁盘空间使用情况 显示磁盘空间是员工情况,以M显示:    df -m -i 使用inodes显示结果 -k(m) 使用KB(MB)显示结果 du ...

  8. 怎么运用ZBrush中的Z球制作身体部分

    本文主要讲解利用ZSphere[Z球]创建人体的大体轮廓,这是ZBrush®软件制作模型的第一步,这一阶段中我们需要反复调节人体比例结构,为以后深入制作打下基础,具体制作过程如下. 查看更多内容请直接 ...

  9. 分布式服务框架 Zookeeper(转)

    分布式服务框架 Zookeeper -- 管理分布式环境中的数据 Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题 ...

  10. URAL 1416 Confidential --最小生成树与次小生成树

    题意:求一幅无向图的最小生成树与最小生成树,不存在输出-1 解法:用Kruskal求最小生成树,标记用过的边.求次小生成树时,依次枚举用过的边,将其去除后再求最小生成树,得出所有情况下的最小的生成树就 ...