jQuery父元素選擇方法：parents和parent詳解

一、parents方法的介紹

jQuery的parents方法可以選取當前元素的所有祖先元素，「一路」向上直到文檔的根元素，也可以傳遞參數進行選擇性篩選。parents的參數可以是選擇器，也可以是元素、jQuery對象，甚至可以是HTML字元串。

// 選擇當前元素的所有祖先元素
$("selector").parents()

// 選擇當前元素的某個祖先元素
$("selector").parents("selector")

如果parents沒有傳遞參數，那麼將會選取當前元素的所有祖先元素。如果傳遞了參數，則選取符合條件的祖先元素。

二、parents方法的應用

1、獲取某個祖先元素的屬性值

假設我們想要獲取某個符合條件的祖先元素的data屬性值，可以採用下面的方式：

// 獲取ID為test的祖先元素中的data屬性值
$("#test").parents("#parent").data("data-name");

2、給某個祖先元素添加樣式

假設我們想要給某個符合條件的祖先元素添加樣式，可以採用下面的方式：

// 給ID為parent的祖先元素添加樣式
$("#test").parents("#parent").css("background-color", "green");

三、parent方法的介紹

jQuery的parent方法選取當前元素的父級元素，可以傳遞參數進行選擇性篩選。

// 選擇當前元素的父元素
$("selector").parent()

// 選擇當前元素的某個父元素
$("selector").parent("selector")

如果parent沒有傳遞參數，那麼將會選取當前元素的直接父元素。如果傳遞了參數，則選取符合條件的父元素。

四、parent方法的應用

1、給父元素添加樣式

假設我們想要給當前元素的父元素添加樣式，可以採用下面的方式：

// 給當前元素的父元素添加樣式
$("selector").parent().css("background-color", "red");

2、獲取父元素的某個屬性值

假設我們想要獲取當前元素的父元素中的某個屬性值，可以採用下面的方式：

// 獲取當前元素的父元素中的data屬性值
$("selector").parent().data("data-name");

五、parents方法和parent方法的區別

1、選取範圍不同

parents方法把當前元素的所有祖先元素都選出來，而parent方法只選取當前元素的直接父元素。

2、傳遞參數的方式不同

parents方法傳遞參數的方式可以是選擇器、元素、jQuery對象、HTML字元串等；而parent方法只能傳遞選擇器。

3、返回值不同

parents方法返回的是一個包含所有符合條件祖先元素的jQuery對象，而parent方法返回的是一個包含所有符合條件父元素的jQuery對象。

六、總結

jQuery的parents方法和parent方法都是用來選取父元素的，但是它們的選取範圍、傳遞參數的方式以及返回值都有所不同。熟悉它們的使用方法，可以幫助我們更加方便地操作頁面上的元素。