js jquery获取当前元素的兄弟级上一个下一个元素

要获取当前元素的兄弟元素，我们可以使用jQuery提供的siblings()方法，该方法可以获取当前元素的所有兄弟元素。如果只需要获取特定的兄弟元素，则可以使用next()和prev()方法。

下面是获取当前元素的所有兄弟元素的语法：

$(selector).siblings();

其中，selector是要获取兄弟元素的元素选择器。例如，如果需要获取class为sibling的元素的所有兄弟元素，可以使用以下代码：

$(".sibling").siblings();

接下来，我们来看一下如何使用next()和prev()方法来获取当前元素的上一个和下一个兄弟元素。

要获取当前元素的下一个兄弟元素，可以使用next()方法。下面是语法：

$(selector).next();

例如，下面的代码获取class为sibling的元素的下一个兄弟元素：

$(".sibling").next();

同理，要获取当前元素的上一个兄弟元素，则可以使用prev()方法。下面是语法：

$(selector).prev();

例如，下面的代码获取class为sibling的元素的上一个兄弟元素：

$(".sibling").prev();

下面是一个完整的示例，该示例演示如何获取当前元素的所有兄弟元素、下一个兄弟元素和上一个兄弟元素。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Siblings Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btnSiblings").click(function(){
                $(".sibling").siblings().css("color", "red");
                $(".sibling").next().css("backgroundColor", "yellow");
                $(".sibling").prev().css("backgroundColor", "lightgreen");
            });
        });
    </script>
</head>
<body>
    <h2>jQuery Siblings Example</h2>
    <p class="first sibling">Paragraph 1</p>
    <p class="sibling">Paragraph 2</p>
    <p class="sibling">Paragraph 3</p>
    <p class="sibling">Paragraph 4</p>
    <button id="btnSiblings">Get Siblings</button>
</body>
</html>

在上面的示例中，我们有四个P标签，它们的类都是sibling。当单击按钮时，我们将获取class为sibling的元素的所有兄弟元素，并将它们的颜色设为红色；然后我们会设置class为sibling的元素的下一个元素的背景色为黄色，而上一个元素的背景颜色为浅绿色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js jquery获取当前元素的兄弟级上一个下一个元素 - Python技术站

js jquery获取当前元素的兄弟级 上一个 下一个元素

相关文章

js jquery获取当前元素的兄弟级上一个下一个元素