jQuery 如何获取兄弟节点? 下面本篇文章就来给大家介绍一下使用 jQuery 获取兄弟节点的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
jQuery 获取兄弟节点的方法
siblings(): 选取所有兄弟节点
next(): 选取后面的兄弟节点
nextAll(): 选取所有后面的兄弟节点
nextUntil(): 选取所有后面的兄弟节点, 但不包括后面指定节点的弟弟.
prevAll(): 选取所有墙面的兄弟节点
prevUntil(): 选取所有的兄弟节点, 但不包含后面指定的节点及指定节点的哥哥
示例
示例 1: 使用 siblings() 选择类名称为 "star" 的 li 元素的所有兄弟元素
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .siblings *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("li.start").siblings().CSS({
- "color": "red",
- "border": "2px solid red"
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;" class="siblings">
- <ul>
- ul (父节点)
- <li>
- li (类名为 "star" 的上一个兄弟节点)
- </li>
- <li>
- li (类名为 "star" 的上一个兄弟节点)
- </li>
- <li class="start">
- li (兄弟节点)
- </li>
- <li>
- li (类名为 "star" 的下一个兄弟节点)
- </li>
- <li>
- li (类名为 "star" 的下一个兄弟节点)
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
示例 2: 使用 next() 返回带有类名 "start" 的每个 <li> 元素的后一个同级元素
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .siblings *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("li.start").next().CSS({
- "color": "red",
- "border": "2px solid red"
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;" class="siblings">
- <ul>
- ul (父节点)
- <li>
- li (兄弟节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- <li class="start">
- li (类名为 "start" 的兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的下一个的兄弟节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
示例 3: 使用 nextAll() 返回类名为 "star" 的 li 节点的所有下一个兄弟节点
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .siblings *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("li.start").nextAll().CSS({
- "color": "red",
- "border": "2px solid red"
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;" class="siblings">
- <ul>
- ul (父节点)
- <li>
- li (兄弟节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- <li class="start">
- li (类名为 "star" 的兄弟节点)
- </li>
- <li>
- li (类名为 "star" 的 li 节点的下一个兄弟节点)
- </li>
- <li>
- li (类名为 "star" 的 li 节点的下一个兄弟节点)
- </li>
- <li>
- li (类名为 "star" 的 li 节点的下一个兄弟节点)
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
示例 4: 使用 nextUntil() 返回在类名为 "star" 和类名为 "stop" 的 li 元素之间的所有下一个兄弟元素
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .siblings *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("li.start").nextUntil("li.stop").CSS({
- "color": "red",
- "border": "2px solid red"
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;" class="siblings">
- <ul>
- ul (父节点)
- <li>
- li (兄弟节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- <li class="start">
- li (类名为 "start" 的兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的下一个兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的下一个兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的下一个兄弟节点)
- </li>
- <li class="stop">
- li (类名为 "stop" 的兄弟节点)
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
示例 5: 使用 prevAll() 返回类名称为 "star" 的 li 元素之前的所有兄弟元素
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .siblings *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("li.start").prevAll().CSS({
- "color": "red",
- "border": "2px solid red"
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;" class="siblings">
- <ul>
- ul (parent)
- <li>
- li (类名为 "start" 的 li 的上一个兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 的上一个兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 的上一个兄弟节点)
- </li>
- <li class="start">
- li (类名为 "start" 的 li 节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
示例 6: 使用 prevUntil() 返回在类名为 "star" 和 "stop" 的 li 元素之间的所有上一个兄弟元素
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .siblings *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("li.start").prevUntil("li.stop").CSS({
- "color": "red",
- "border": "2px solid red"
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;" class="siblings">
- <ul>
- ul (父节点)
- <li class="stop">
- li (类名为 "stop" 的兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的上一个兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的上一个兄弟节点)
- </li>
- <li>
- li (类名为 "start" 的 li 节点的上一个兄弟节点)
- </li>
- <li class="start">
- li (类名为 "start" 的 li 节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- <li>
- li (兄弟节点)
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/jquery/12928.html