JQuery如何获取同级元素（同级兄弟元素的选择方法）

频道：互联网 日期： 浏览：2

在 jQuery 中，有多种方法可以获取同级元素（同级兄弟元素），以下是详细介绍：

siblings() 方法

siblings() 方法用于获取匹配元素集合中每个元素的所有同级元素，可选择性地通过选择器进行筛选。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(1)").siblings().css("color", "red");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

上述代码中，$("li:eq(1)").siblings() 选取了第二个列表项的所有同级元素，并将它们的文本颜色设置为红色。

next() 方法

next() 方法用于获取匹配元素集合中每个元素紧邻的下一个同级元素，可选择性地通过选择器进行筛选。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(0)").next().css("color", "blue");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

此代码中，$("li:eq(0)").next() 选取了第一个列表项的下一个同级元素，并将其文本颜色设置为蓝色。

JQuery如何获取同级元素（同级兄弟元素的选择方法）

nextAll() 方法

nextAll() 方法用于获取匹配元素集合中每个元素之后的所有同级元素，可选择性地通过选择器进行筛选。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(0)").nextAll().css("color", "green");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

代码里，$("li:eq(0)").nextAll() 选取了第一个列表项之后的所有同级元素，并将它们的文本颜色设置为绿色。

nextUntil() 方法

nextUntil() 方法用于获取介于两个给定元素之间的每个元素之后的所有同级元素。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(0)").nextUntil("li:eq(3)").css("color", "orange");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

这里，$("li:eq(0)").nextUntil("li:eq(3)") 选取了第一个列表项之后直到第三个列表项之前的所有同级元素，并将它们的文本颜色设置为橙色。

JQuery如何获取同级元素（同级兄弟元素的选择方法）

prev() 方法

prev() 方法用于获取匹配元素集合中每个元素紧邻的前一个同级元素，可选择性地通过选择器进行筛选。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(2)").prev().css("color", "purple");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

此代码中，$("li:eq(2)").prev() 选取了第三个列表项的前一个同级元素，并将其文本颜色设置为紫色。

prevAll() 方法

prevAll() 方法用于获取匹配元素集合中每个元素之前的所有同级元素，可选择性地通过选择器进行筛选。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(3)").prevAll().css("color", "brown");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

代码里，$("li:eq(3)").prevAll() 选取了第四个列表项之前的所有同级元素，并将它们的文本颜色设置为棕色。

JQuery如何获取同级元素（同级兄弟元素的选择方法）

prevUntil() 方法

prevUntil() 方法用于获取介于两个给定元素之间的每个元素之前的所有同级元素。

示例代码如下：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li:eq(3)").prevUntil("li:eq(0)").css("color", "gray");
    });
  </script>
</head>
<body>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
  </ul>
</body>
</html>

这里，$("li:eq(3)").prevUntil("li:eq(0)") 选取了第四个列表项之前直到第一个列表项之后的所有同级元素，并将它们的文本颜色设置为灰色。