入門選擇，而不是處理器

Question

HTML：

<div id="div1"> 
    <div class="close">close</div> 
</div> 
<div id="div2"> 
    <div class="close">close</div> 
</div> 

的jQuery：

$('.close').on('click', '#div1, #div2', function(){ 
    console.log ($(this)); // .close 
}); 

如果我有一個關閉按鈕，我如何才能父元素爲this而不是按鈕多個元素？

因此，如果我點擊上的.close，我需要作爲this來使用它。

Answer 1

憑直覺，我想看看closest，這需要選擇一個PARAM：

var selector = '#div1, #div2'; 
$('.close').on('click', selector, function(){ 
    console.log ($(this).closest(selector)); // .close 
}); 

.closest會返回一個jQuery對象，表示第一個節點是匹配選擇器。它從當前對象開始並繼續到.parent()，直至找到匹配結果

Answer 2

由於元素是要引用的元素的子元素，因此請使用父級選擇器。

$(this).parent().hide() 

大多數情況下，我們會在元素上使用一個類並使用最接近的元素來選擇它。

$(this).closest('.msg').hide() 

$('.close').on('click', function(){ 
 
    $(this).closest(".msg").hide(); 
 
});

.msg{ 
 
    .border: 1px solid black 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1" class="msg"> 
 
    <div class="close">close</div> 
 
    <p>test 1</p> 
 
</div> 
 
<div id="div2" class="msg"> 
 
    <div class="close">close</div> 
 
    <p>test 2</p> 
 
</div>

Answer 3

實際上您不需要任何選擇器，只需要一個.closest("div")。
如果你想成爲一個有點更具體的像「最近的ID與div開始」比你可以做這樣的：

$('.close').on('click', function(){ 
 
    $(this).closest("[id^='div']").fadeOut(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="div1"> 
 
    <div class="close">close1</div> 
 
</div> 
 
<div id="div2"> 
 
    <div class="close">close2</div> 
 
</div>

或者，做它的方式你開始你可以使用event.delegateTarget-
這是指實際的選擇者 - 委託人$('#div1, #div2')

$('#div1, #div2').on('click', '.close', function(event) { 
 
    $(event.delegateTarget).fadeOut(); 
 
}); 
 

 
// or use also for brevity: 
 
// $("[id^='div']").on(...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="div1"> 
 
    <div class="close">close1</div> 
 
</div> 
 
<div id="div2"> 
 
    <div class="close">close2</div> 
 
</div>