<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");


效果：

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()_css

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



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


效果：

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()_高亮_02

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



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


效果：

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()_高亮_03

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

 

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



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


效果：

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()_javascript_04

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



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


效果：

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()_css_05

 

个人控制显示隐藏实例：

$(".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>


此随笔或为自己所写、或为转载于网络。仅用于个人收集及备忘。