jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()
?
<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>
轉載于:https://www.cnblogs.com/shy1766IT/p/4472856.html
總結
以上是生活随笔為你收集整理的jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux驱动设计——字符杂项设备
- 下一篇： 营销的而思考*