跳转至

Jquery 遍历同代

write by 2019/6/15 13:10

1. 同胞

  同胞拥有相同的父元素。

2. 水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

  • siblings() 方法返回被选元素的所有同胞元素。
  • next() 方法返回被选元素的下一个同胞元素。
  • nextAll() 方法返回被选元素的所有跟随的同胞元素。
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev() 方法返回被选元素的上一个同胞元素。
  • prevAll()方法返回向上被选元素的所有跟随的同胞元素
  • prevUntil() 方法返回向上介于两个给定参数之间的所有跟随的同胞元素

总结

1. next/prev 仅仅是选中的元素向下/向上一个元素，不能带参数
2. nextAll/prevAll 选中的元素向下/向上所有同辈元素，不能带参数
3. nextUntil/prevUntil 选中的元素向到后面参数之间元素

2.1 siblings

  siblings() 方法返回被选元素的所有同胞元素。下面的例子返回 <p> 的所有同胞元素 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <p id="keke">我是可可</p>
        <p id="duodo">我是多多</p>
    </div>

</body>
<script>
    $(function () {
        $('#keke').siblings().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
siblings

您也可以使用可选参数来过滤对同胞元素的搜索. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <p id="keke">我是可可</p>
        <p id="duodo">我是多多</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#keke').siblings('h3').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
siblings1

2.2 next

  next() 方法返回 被选元素的下一个同胞元素 。该方法只返回一个元素。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <p id="keke">我是可可</p>
        <p id="duodo">我是多多</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#keke').next().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
next

2.3 nextAll

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <p id="keke">我是可可</p>
        <p id="duodo">我是多多</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#keke').nextAll().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
nextall

2.4 nextUntil

  nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <p id="keke">我是可可</p>
        <p id="duodo">我是多多</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#keke').nextUntil('h4').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
nextuntil

2.5 prev

   方法返回被选元素的上一个同胞元素。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#duoduo').prev().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
prev

2.6 prevAll

  方法返回向上被选元素的所有跟随的同胞元素 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#duoduo').prevAll().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
prevall

2.7 prevUntil

   

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#duoduo').prevUntil('h3').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
prevuntil