jQuery pianliu - closest() fangfa

jQuery 遍历参考手册

Shiyan

Ben li shiyan zhenmo ruguo guo closest() wancheng shijian weidao. Dang bei zuizui jing de liebiao yuansu huo tache zi xiaodai yuansu bei dianji shi, hui qiehuan huangse beijing:

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

亲自试一试

Dingyi he yongfa

closest() fangfa huo de shi peihe xuanzhe de diyi ge zuzhuan yuansu, cong dianqian yuansu kaishi ran DOM shu xiangshang.

Yufa

.closest(selector)
Canjia Miaoshu
selector Ziwen jiazhi, baohuan peihe yuansu de xuanzhe biaodashi.

Xiangxi shuoming

Ruguo jiding shi biaodai DOM yuansu jili de jQuery obyekti, .closest() fangfa xuanze women shiye DOM shu zhong zhexie yuansu, yu tamen de zuzhuan yuansu, yong peihe yuansu gouzao xing xing jQuery obyekti..parents() He .closest() fangfa xiangsi, tamen dou ran DOM shu shang xiangshang pianliu. Liangzhong zhihuan zhihuan weiyi, guanzhu shi neng, que hen zhongyao:

.closest() .parents()
Cong dianqian yuansu kaishi Cong zu shi yuansu kaishi
Kaiya kaiya DOM shu shang, hen dao yingyong xuanzhe de yige peihe wu. Kaiya kaiya DOM shu shang, hen dao wenjian de gen yuansu wu, meige zuzhuan yuansu tianjia dian lianji he; ruguo yingyong le xuanzhe, jiu jiyu zhege xuanzhe dian lianji jinxing shaixi.
Dace kaiya, kaiya, kaiya jQuery obyekti Dace kaiya, kaiya, kaiya, kaiya, kaiya jQuery obyekti

Kai kai hanyan hanyan HTML koyarwa:

<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 遍历参考手册