jQuery 遍历 - closest() 方法

jQuery muhtasari wa kueleza kwa mifano

实例

本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景：

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

Jifunze tena

定义和用法

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

语法

.closest(selector)
参数 描述
selector 字符串值，包含匹配元素的选择器表达式。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：

.closest() .parents()
从当前元素开始 从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。 沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
Kuwa kifaa cha jQuery kinahusika kwa kumpa visi vya kifaa cha jQuery kwa sababu ya kina au moja Kuwa kifaa cha jQuery kinahusika kwa kumpa visi vya kifaa cha jQuery kwa sababu ya kina, moja au vingi

Tazama hapa chini HTML kipengele

<ul id="one" class="level-1">
  
  • I
    • 
  
  • II
  
      
    
    • A
      • 
    
    • B
      
        
        
      • 1
        • 
        
      • 2
        • 
        
      • 3
        • 
      
      
    
      • 
    
    • C
      • 
  
    
  
    • 
  
  • III
    •

    例子 1

    假设我们执行一个从项目 A 开始的对

      元素的搜索：

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

      Jifunze tena

      这会改变 level-2

        的颜色，这是因为当向上遍历 DOM 树时会第一个遇到该元素。

        例子 2

        假设我们搜索的是

      • 元素：

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

        Jifunze tena

        这会改变列表项目 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');

        Jifunze tena

        Makabila hii yaandiko yana kumwambia rangi ya <ul> ya level-2, kwa sababu ina nafasi ya kumwambia kina wa <ul> wa list item A na pia ni mtoto wa list item II. Hii inasababisha rangi ya <ul> ya level-1 ingeingia rangi, kwa sababu hii ina nafasi ya mtoto wa list item II.

    jQuery muhtasari wa kueleza kwa mifano