知识点六：jQuery遍历-同胞Siblings(), next(), nextAll()

jQuery遍历-同胞

从同级元素之后遍历添加Siblings(),next(),nextAll(),nextUtil(),

在同级元素之前面进行遍历添加prev(),prevAll(),prevUntil()

详细内容如下：

1、siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
    $(document).ready(function(){        $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings"><div>div (父)  <p>p</p>    <span>span</span>   <h2>h2</h2> <h3>h3</h3>
      <p>p</p>
</div></body>
</html>

2、next()方法，用来查找同一级元素的下一个标签

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
    $(document).ready(function(){   $("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings"><div>div (父)  <p>p</p>    <span>span</span>   <h2>h2</h2> <h3>h3</h3> <p>p</p>
</div></body>
</html>

nextAll(),找到同级标签以下的所有标签

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.siblings *
{
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
    $(document).ready(function(){    $("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings"><div>div (父)   <p>p</p>   <span>span</span>   <h2>h2</h2> <h3>h3</h3>  <p>p</p>
</div></body>
</html>

prev(),prevAll(),prevUntil() 在同级元素之前面进行遍历做添加

与next(),nextAll(),nextUtil()方向相反

知识点六：jQuery遍历-同胞Siblings(), next(), nextAll()相关推荐

jQuery遍历之next()、nextAll()方法使用实例
jquery遍历:next()和nextAll()方法.实例如下: 复制代码代码如下: <html> <head> <script type="text/ja ...
jquery遍历函数siblings()
本文转自:http://blog.csdn.net/cui_angel/article/details/7896883 siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集 ...
JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着 ...
前端 -＞ jQuery 遍历
文章目录 jQuery 遍历 - 祖先 jQuery parentsUntil() 方法 jQuery 遍历 - 后代 jQuery 遍历 - 同胞(siblings) jQuery 遍历- 过滤详 ...
jquery遍历元素children、find、parent、parents、parentsUntil、next、prev、siblings、closest、filter、not
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-DOM操作全解 jquery遍历元素 jquery元素的函数包括children.find.parent.parents.parentsUn ...
jQuery的同胞遍历
同胞拥有相同的父元素,所有元素很多方法 siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() siblings( ...
JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(六十二) jQuery jQuery遍历传统遍历 jQuery对象遍历 jQuery全局函 ...
jquery遍历节点的方法
jquery遍历节点方法总结: 后代遍历 children()方法返回被选元素的所有直接子元素. find()方法返回被选元素的后代元素,一路向下直到最后一个后代. 祖先遍历 parent()方法返回 ...
jQuery——遍历
向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素,一直向上遍历,直到文档的根元素(html) .p ...

知识点六：jQuery遍历-同胞Siblings(), next(), nextAll()

1、siblings() 方法

知识点六：jQuery遍历-同胞Siblings(), next(), nextAll()相关推荐

最新文章

热门文章