---
# System prepended metadata

title: parent() 選擇當下元素，獲取父元素
tags: [jQuery]

---

### 透過此方法，可以輕鬆獲取當下元素的父元素。

### 基本語法:
```js
$(selector).parent()
```

### 範例:

- **HTML**:
```html
    <div class="container">
      <p>Paragraph 1</p>
      <div class="inner">
        <p>Paragraph 2</p>
      </div>
    </div>
```
- **JavaScript / jQuery**:
  - 因為 **p** 元素的上層為 `.container` & `inner` 故父層添加顏色時，本身也會受影響。
```
// 選擇 p 元素，並獲取父元素給予添加 css 樣式
$("p").parent().css("color", "red");
```

- 顯示結果:
![image](https://hackmd.io/_uploads/BJIy9fYvT.png)


### 也可以在 parnet() 裡面設定特定選擇器:

- 針對 **p** 元素的上層 - 指定類名 "**inner**" 改變其樣式。

```js
$("p").parent(".inner").css("backgroundColor", "yellow");
```

- 顯示結果:
  - inner class 為下面的區塊，故下方段落2改變背景顏色。
![image](https://hackmd.io/_uploads/rJQKoMYva.png)
