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为显示的，就让它隐藏；

类似的点击控制显示隐藏的例子：

转载于:https://www.cnblogs.com/shy1766IT/p/4472856.html

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()相关推荐

html用js添加兄弟节点,jquery 删除节点添加节点找兄弟节点的简单实现
$().empty(); //该方法会删除当前节点下的所有子节点,请注意当前节点不会被删除 $().remove(); //该方法会删除当前节点下的所有子节点,请注意当前节点会被删除 $(). ...
jquery获取兄弟节点
jquery如何获取某一个兄弟节点 $('#id').siblings() 当前元素所有的兄弟节点 $('#id').prev() 当前元素前一个兄弟节点 $('#id').prevAll() 当前元 ...
jquery 选择兄弟节点
jquery 选择兄弟节点 $('#id').siblings() 当前元素所有的兄弟节点 $('#id').prev() 当前元素前一个兄弟节点 $('#id').prevaAll() 当前元素之前 ...
视频教程-JavaScript+jQuery+项目实战系列视频教程-JavaScript
JavaScript+jQuery+项目实战系列视频教程国内IT培训讲师,国内知名出版社IT作家.经验丰富,草根悍将.待人诚恳,从不摆架子,做事认真负责. 周知胜 ¥117.00 立即订阅扫码下载 ...
jQuery获取兄弟元素的各种方法总结
1.next();//获取当前元素的下一个兄弟元素 2.nextAll();//获取当前元素后面所有的兄弟元素 3.prev();//获取当前元素的前一个兄弟元素 4.prevAll();//获取当前 ...
jQuery遍历之next()、nextAll()方法使用实例
jquery遍历:next()和nextAll()方法.实例如下: 复制代码代码如下: <html> <head> <script type="text/ja ...
jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
jquery --- 收缩兄弟元素
点击高亮的收缩兄弟元素. 思路: 1.点击的其实是tr.(类为parent) 2.toggleClass可以切换样式 3.slblings('.class').toggle 可以根据其类来进行隐藏显示 ...
import 别名_Python基础找茬系列09--import和from-import的引用区别
一.语法区别二.两种导包在内存上的区别一图看懂import与from-import的区别无论是使用import隐式导包还是form-import显示导包,整个模块都会被加载到内存中例如:fro ...

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

jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()相关推荐

最新文章

热门文章