jQuery 筆記 - $(this), parent(), siblings(), find() 用法

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

HTML

<ul class="menu">
  <li>選單1</li>
  <li>選單2</li>
  <li>選單3</li>
  <li>選單4</li>
  <li>選單5</li>
  <li>選單6</li>
</ul>

SCSS

.menu {
  width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  li {
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 10px;
    &:hover {
      background-color: yellow;
      cursor: pointer;
    }
    &.active {
      background-color: yellow;
      cursor: pointer;
    }
  }
}

this 選到自身元素

jQuery 中已經把 this 包裝好變成指向本身元素的寫法，變得相當方便，但在原生寫法就要看狀況而定了。

首先可以看到 SCSS 有加上一段是預備讓 JS 動態新增 .active 的片段程式碼。
要記錄的是如何透過 this 選取到自身元素，並且產生效果。可以這樣寫，

$(".menu li").click(function (e) {
  e.preventDefault();
  $(this).addClass("active");
});

當我點擊到 .menu 的 li 時，在選到的自身元素動態加上 active ，就會產生效果囉！

parent() 選到父元素

這個語法是 jQuery 包裝好的函式，也相當好用，當我點擊到元素本身後，會選到外層的父元素，並且控制它。

這邊的情境是，現在有一個選單，裡面有一個按鈕，當我點選按鈕後，會把該格的清單改變背景顏色，

HTML 架構

跟原本範本差不多，只是在 li 內加入了按鈕而已。

<ul class="menu">
  <li><button class="btn">選單1</button></li>
  <li><button class="btn">選單2</button></li>
  <li><button class="btn">選單3</button></li>
  <li><button class="btn">選單4</button></li>
  <li><button class="btn">選單5</button></li>
  <li><button class="btn">選單6</button></li>
</ul>

jQuery 寫法

點擊按鈕後，自身元素的父元素會產生 toggleClass 效果，動態切換 .active 。
parent() 語法要寫在 $(this) 的後面。

$(".btn").click(function (e) {
  e.preventDefault();
  $(this).parent().toggleClass("active");
});

siblings() 同層其他元素

這個語法就是選到同層元素，並指定該效果給它，這邊練習是滑鼠選到該元素後會改變背景顏色，而其他同層元素背景取消背景色。

一開始範例中的 li 就是同層元素。

jQuery 寫法

當我點擊 .menu 中的 li ，會在自身元素增加 .active ，並選到同層的 li 元素( siblings() )同時取消賦予的 .active 效果。

$(".menu li").click(function (e) {
  e.preventDefault();
  $(this).addClass("active").siblings().removeClass("active");
});

find() 找到子層元素

前面提到父層元素，那當然也有子層元素，這次要選到 li 後，會改變當中的文字顏色，

HTML 架構

可以看到 HTML 結構中，在 li 內有 h3 標題。

<ul class="menu">
  <li>
    <h3>選單1</h3>
  </li>
  <li>
    <h3>選單2</h3>
  </li>
  <li>
    <h3>選單3</h3>
  </li>
  <li>
    <h3>選單4</h3>
  </li>
  <li>
    <h3>選單5</h3>
  </li>
  <li>
    <h3>選單6</h3>
  </li>
</ul>

SCSS 樣式

在 h3 加上預備要的樣式，並新增一個 .active 預備動態新增效果時讓 h3 的文字改變顏色。

.menu {
  width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  li {
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 10px;
    &:hover {
      background-color: #eeeeee;
      cursor: pointer;
    }
    h3 {
      display: inline-block;
      &.active {
        color: red;
        cursor: pointer;
      }
    }
  }
}

jQuery 寫法

當我點擊到 li 時，會選到 li 自身元素，再找到裡面的子層元素 h3 ，並且在 .active 做切換。

$(".menu li").click(function (e) {
  e.preventDefault();
  $(this).find("h3").toggleClass("active");
});