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上的#div1，我需要#div1作为this才能使用它。

Answer 1

本能地，我会看closest，它将选择器作为参数：

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>

获取选择器，而不是处理程序

3 个答案: