jQuery Pagtatalikha - .closest() na paraan

jQuery 遍历參考手冊

Halimbawa

Ang kasong ito ay nagpapakita kung paano gamitin ang closest() para sa event delegation. Kapag pinindot ang pinakamalapit na elemento ng listahin o anumang kanilang mga anak o bataan, ay magbabago ang kulay ng bakod sa dilaw:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

親自試一試

Paglilinang at paggamit

Ang .closest() na paraan ay nagbibigay ng pinakamataas na elemento na tumutugon sa piniling selector, mula sa kasalukuyang elemento papunta sa kahoy ng DOM.

Grammar

.closest(selector)
Parameter Paglalarawan
selector String na halaga, naglalaman ng ekspresyong selector na tumutugon sa magiging elemento

Detalyadong paglalarawan

Kung ibinigay ang isang jQuery object na naglalaman ng koleksyon ng DOM elemento, ang .closest() na paraan ay nagbibigay sa amin ng kakayahan na hanapin ang mga elemento sa kahoy ng DOM at kanilang mga magulang, at gumawa ng bagong jQuery object gamit ang tumutugon na elemento..parents() Kasama ang .closest() na paraan, sila ay parehong sumusulong sa kahoy ng DOM.

.closest() .parents()
Simula sa kasalukuyang elemento Simula sa magulang na elemento
Sumusulong sa kahoy ng DOM papunta sa pinakamataas na elemento na tumutugon sa piniling selector. Sumusulong sa kahoy ng DOM papunta sa pinakamataas na elemento ng dokumento, at idagdag ang bawat magulang na elemento sa isang pansamantalang koleksyon; kapag napiling selector, ay pinasusuri ang koleksyon sa pamamagitan ng selector na iyon.
Bumalik sa isang jQuery object na naglalaman ng walang, o isang elemento Bumalik sa isang jQuery object na naglalaman ng walang, isang, o maraming elemento

Panghahayag sa ibabang HTML na bahagi:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

例子 1

假設我們執行一個從項目 A 開始對 <ul> 元素的搜索：

$('li.item-a').closest('ul').css('background-color', 'red');

親自試一試

這會改變 level-2 <ul> 的顏色，因為當向上遍歷 DOM 树時會第一個遇到該元素。

例子 2

假設我們搜索的是 <li> 元素：

$('li.item-a').closest('li').css('background-color', 'red');

親自試一試

這會改變列表項目 A 的顏色。在向上遍歷 DOM 树之前，.closest() 方法會從 li 元素本身開始搜索，直到選擇器匹配項目 A 為止。

例子 3

我們可以傳遞 DOM 元素作為 context，在其中搜索最接近的元素。

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

親自試一試

以上代碼會改變 level-2 <ul> 的顏色，因為它既是列表項 A 的第一個 <ul> 祖先，同時也是列表項 II 的後代。它不會改變 level-1 <ul> 的顏色，因為它不是 list item II 的後代。

jQuery 遍历參考手冊