<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. Merge Two Sorted Lists

    Merge Two Sorted Lists https://leetcode.com/problems/merge-two-sorted-lists/ Merge two sorted linked ...

  2. [转]GridView中直接新增行、编辑和删除

    本文转自:http://www.cnblogs.com/gdjlc/archive/2009/11/10/2086951.html .aspx <div><asp:Button ru ...

  3. 对于大学4年的反思(续)，记我的ThoughtWorks面试

    之前我写了一篇对于大学四年的反思,时隔一个月,为什么我这么快就要来写这篇续章呢?主要有两个原因,第一是感谢静子姐姐,记得知乎上有个回答里面说过人生需要有贵人的帮助,遇到贵人是一件很幸运的事情.我想,静 ...

  4. floyd算法 青云的机房组网方案（简单）

    青云的机房组网方案(简单) 青云现在要将 nn 个机房连成一个互相连通的网络.工程师小王设计出一个方案:通过在 nn 个机房之间铺设 n-1n−1 条双向的光纤,将所有的机房连接.可以假设数据在两个机 ...

  5. 不会UML的程序员不是好构架师?

    情况描述 我已经工作两年半, 参加过一个网页游戏项目和一个IOS应用项目, 自以为参与度非常高, 也经常涉及到底层引擎和主逻辑业务. 目前想更快的向构架师方向发展. 最近在看\<Learning ...

  6. NGUI 3.x 练习

    一.常用快捷键 Alt+Shitf+W 创建一个新的 Widget Alt+Shift+S 创建一个新的 Sprite Alt+Shift+L 创建一个新的 Label Alt+Shift+T 创建一 ...

  7. Z路径覆盖

    Z路径覆盖是路径覆盖的一个变体.路径覆盖是白盒测试最为典型的问题.着眼于路径分析的测试可称为路径测试.完成路径测试的理想情况是做到路径覆盖.对于比较简单的小程序实现路径覆盖是可能做到的.但是如果程序中 ...

  8. MongoDB学习（一）简介

    本篇主要简单介绍一下MongoDB数据库. 一.简介 mongoDB是一个开源的,基于分布式的,面向文档存储的非关系型数据库.是非关系型数据库当中功能最丰富.最像关系数据库的. mongoDB由C++ ...

  9. PCTF-2016-WEB

    Pctf ** web100 PORT51**  开始看到这个真的无法下手,想过用python–socket编程或者scapy发包.自己觉得是可以的,但是没有去试,后面看一大神writeup,知道: ...

  10. 解决Gradle DSL method not found: ‘android()’

    最近导入as的项目出了这样的问题 这个问题困扰了我很长时间,好吧,搜了半天全都是runProguard的,最后在stackoverflow上搜到解决办法了: http://stackoverflow. ...