jQuery 获取此元素的父级兄弟元素

在本文中，我们将介绍如何使用jQuery获取一个元素的父级元素以及相邻元素，这些操作只针对当前元素。

获取父级元素

有时候我们需要获取某个元素的父级元素，可以通过jQuery中的parent()方法来实现。这个方法返回当前元素的直接父级元素。

示例代码如下：

$(document).ready(function(){
    $("button").click(function(){
        var parent = $(this).parent();
        parent.css("background-color", "yellow");
    });
});

在上面的示例中，当按钮被点击时，我们通过parent()方法获取按钮元素的直接父级元素，并将其背景颜色设置为黄色。

获取相邻元素

除了获取父级元素，有时候我们也需要获取当前元素的相邻元素。在jQuery中，我们可以使用siblings()方法来实现。这个方法返回与当前元素属于同一个父级元素的所有兄弟元素。

示例代码如下：

$(document).ready(function(){
    $("button").click(function(){
        var siblings = $(this).siblings();
        siblings.css("color", "red");
    });
});

在上面的示例中，当按钮被点击时，我们通过siblings()方法获取与按钮元素属于同一个父级元素的所有兄弟元素，并将它们的字体颜色设置为红色。

仅针对此元素获取父级兄弟元素

在某些情况下，我们只需要获取当前元素的父级元素以及相邻元素，而不是整个选择集中其他元素的兄弟元素。此时，我们可以使用prevAll()、nextAll()和addBack()方法来实现。

prevAll()方法返回当前元素之前的所有兄弟元素，nextAll()方法返回当前元素之后的所有兄弟元素，addBack()方法将当前元素添加到选择集中。

示例代码如下：

$(document).ready(function(){
    $("button").click(function(){
        var siblings = $(this).parent().prevAll().addBack().nextAll();
        siblings.css("font-weight", "bold");
    });
});

在上面的示例中，当按钮被点击时，我们先通过parent()方法获取按钮元素的父级元素，然后使用prevAll()方法获取父级元素之前的兄弟元素，接着使用addBack()方法将父级元素添加到选择集中，最后使用nextAll()方法获取父级元素之后的兄弟元素。我们将这些元素的字体加粗。