jQuery 遍历 - closest() 方法

jQuery လေ့လာသုံးစံ စာအုပ်

实例

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

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

ကိုယ်တိုင် ကြိုးစားကြပါ

定义和用法

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

အပြောအဆ

.closest(selector)
အရာ ဖော်ပြ
selector ကြောက်ရွား အကြောင်းကြား အား ပါဝင်သော ကြောက်ရွား အချက်အလက်

အသေးစိတ် အကြောင်းကြား

အခြေခံ အရာ အဖွဲ့ အား အစိုးရ သော jQuery အားကစားရုံ ကို အသုံးပြု၍ အခြေခံ အရာများ နှင့် သူတို့၏ အဖိုင် အရာများ ကို အသုံးပြု၍ အချိန်ဆုံး အရာ ပါဝင်သော အချိန်ဆုံး အားကစားရုံ ကို သုံးစွဲနိုင်သည်.parents() .closest() နှင့် အတူ တူညီသည်။ သို့သော် နောက်ပိုင်း အရေးပါ အခြေအား အတူ အတူ မဟုတ်။ သို့သော် အခြေအား အတူ အတူ မဟုတ်။

.closest() .parents()
လက်ရှိ အရာမှ စတင် အဖိုင် အရာမှ စတင်
DOM သို့မဟုတ် အခြေခံ အရာကို အထူးသဖြင့် ရှာဖွေသော ကို အသုံးပြု၍ အခြေခံ အရာများ အား အချိန်ဆုံး အရာအား ပေါင်းစပ်ထားသည် DOM သို့မဟုတ် အခြေခံ အရာကို အထူးသဖြင့် ရှာဖွေသော ကို အသုံးပြု၍ အခြေခံ အရာများ အား အချိန်ဆုံး အရာအား ပေါင်းစပ်ထားသော အချိန်ဆုံး အရာကို ပေါင်းစပ်ထားသည်
အားလုံး အရာကို သို့မဟုတ် တစ်ခု သို့မဟုတ် အသေးအဝိုက် အရာများ ပါဝင်သော jQuery အားကစားရုံ အားလုံး အရာကို သို့မဟုတ် တစ်ခု သို့မဟုတ် အသေးအဝိုက် အရာများ ပါဝင်သော jQuery အားကစားရုံ

အောက်ပါ HTML ပုံစံကို ကြည့်ပါ

<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');

      ကိုယ်တိုင် ကြိုးစားကြပါ

      这会改变 level-2

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

        例子 2

        假设我们搜索的是

      • 元素：

        $('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 အပေါ်အားလုံး အဖြစ် နှင့် နေရာအချက် II အောက်အားလုံး အဖြစ် ဖြစ်သည်။ သို့သော် သူ့ကြောင်းရုပ် သည် level-1 <ul> အရောင် ကို ပြောင်းလဲစေခြင်း မ မရှိသေးပါ။ သို့သော်ကား သူ့ကြောင်းရုပ် သည် list item II အောက်အားလုံး မ ဖြစ်ခဲ့ပါ။

    jQuery လေ့လာသုံးစံ စာအုပ်