jQuery 遍历兄弟姐妹

jQuery 遍历兄弟姐妹

我们可以在jQuery的帮助下在Dom树中横向移动,并找到一个元素的兄弟姐妹。
兄弟姐妹元素共享同一个父元素。

Traversing Sideways: jQuery的方法可以在dom树中进行侧向遍历。

  • siblings()
  • next() & nextAll()
  • nextUntill()
  • prev() & prevAll()
  • prevUntil()
  1. siblings()。siblings()是jQuery中的一个内置方法,用于查找所选元素的所有兄弟姐妹元素。
    语法:
$(selector).siblings(function)
  1. next() 和 nextAll()。 next()是jQuery中的一个内置函数,用于返回所选元素的下一个兄弟姐妹。
    语法:
$(selector).next()
  1. nextUntil()。nextUntil()是jQuery中的一个内置方法,用于查找两个给定元素之间的所有同级元素。
    语法:
$(selector1).nextUntil(selector2)
  1. prev() 和 prevAll()。 prev()是jQuery中的一个内置函数,用于返回所选元素的前一个同级元素。
    语法:
$(selector).prev()
  1. prevUntil()。prevUntil()是jQuery中的一个内置方法,用于查找两个给定元素之间的所有前一个兄弟姐妹元素。
    语法:
$(selector1).nextUntil(selector2)

例子-1:使用“siblings()方法 “

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .block {
            display: block;
            border: 1px solid black;
            padding: 10px;
            color: black;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
  </script>
    <script>
        (document).ready(function() {
            ("h3").siblings().css({
                "color": "green",
                "border": "3px solid green"
            });
        });
    </script>
</head>
  
<body>
    <div class="block">
        <h2 class="block">Geeks</h2>
        <h3 class="block">for</h3>
        <h4 class="block">Geeks</h4>
    </div>
</body>
  
</html>

输出:
jQuery 遍历兄弟姐妹

示例-2:使用 “next()方法”。

<html>
  
<head>
    <style>
        .next * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script>
        (document).ready(function() {
            ("h3").next().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
  
<body class="next">
    <div>
        This is parent element !
        <p>This is first paragraph
      </p>
        <span>first span box </span>
        <h2>heading 2 !</h2>
        <h3>heading 3 !</h3>
        <p>This is the second paragraph
          and next sibling to h3 !</p>
    </div>
</body>
  
</html>

输出:
jQuery 遍历兄弟姐妹

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程