<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. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  2. 10个值得深思的PHP面试问题

    本文所罗列的问题虽然看似简单,但是每个背后都涵盖了一个或几个大家容易忽视的基础知识点,希望能够帮助到你的面试和平时工作. Q1 第一个问题关于弱类型 $str1 = 'yabadabadoo'; $s ...

  3. C和CPP关于条件运算符的区别

    条件运算符形式: cond ? expr1 : expr2; 在C语言中执行过程是: 先对cond求值,值为真返回expr1的值,否则返回expr2的值.(右值) gcc测试结果: 在Cpp中如果两个 ...

  4. makefile自动生成目标与依赖的关系

    有main.c: #include <stdio.h> #include "command.h" int main(int argc, const char *argv ...

  5. Solr字段配置错误

    在站内搜索Solr Schema设计时,有个FTS_URL字段(之前设计url也会参与检索和打分),因此其配置信息如下: <field name="FTS_URL" type ...

  6. Vim tips

    1.光标移动: (1).NG -> 移动到第N行,或者使用:N (2).gg -> 移动到第一行 (3).G -> 移动到最后一行 (4).单词移动: w -> 移动到下一个单 ...

  7. 最严谨的校验email地址的正则表达式

    通用 (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0 ...

  8. RabbitMQ - 实例操作

    以前在单项目中用过RabbitMQ,没有问题 不过这次在分布式项目中使用RabbitMQ中有点搞糊涂了,但是实际上是没有问题的,思路清晰就行 简单看一下实际操作的示例吧: 资源文件中需要配置基本的ra ...

  9. MySQL数据库学习笔记（八）----JDBC入门及简单增删改数据库的操作

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  10. [AS3] 问个很囧的问题: 如何遍历Dictionary?

    可以使用 for...in 循环或 for each...in 循环来遍历 Dictionary 对象的内容. for...in 循环用于基于键进行遍历: 而 for each...in   循环用于 ...