Selector1 -查找子项-单击Close selector1时

Question

我正在学习尽可能地组织和干净地编写我的代码，我发现在google和stackoverflow中找不到解决方案的部分。

这是我想要做的：

$('.selector').find('.close').click(function(){
  ('.selector').hide()
})

有没有办法将选择器用作$(this)

下面是一个更大的示例函数：

$(document).on('pageshow', '#page', function (){ /*do stuff*/ })
    .on('click', '.openBulk', function(){
        $('.bulk').show().find('.close')
            .click(function(){
            $(this).hide();
            //where $(this) is $('bulk'), is it possible?
    })
})

Answer 1

在您的click处理程序中，this将引用.close元素，因为它是最后选择的元素。要返回DOM以查找父.bulk，请使用closest()

$(document).on('pageshow', '#page', function () { 
  /* do stuff */ 
}).on('click', '.openBulk', function() {
  $('.bulk').show().find('.close').click(function() {
    $(this).closest('.bulk').hide();
  })
})

还要注意，您当前在每次单击.openBulk元素时都会复制.close单击处理程序。由于.close的click处理程序在.bulk处于隐藏状态时无法触发，因此可以通过分隔事件处理程序来使代码更清晰：

$(document).on('pageshow', '#page', function () { 
  /* do stuff */ 
}).on('click', '.openBulk', function() {
  $('.bulk').show();
})

$('.close').click(function() {
  $(this).closest('.bulk').hide();
})

Answer 2

click事件中的$(this)指的是单击的元素，它具有类close，如果您想要获取相关的父.bulk元素，可以使用.closest()或.parents()：

$(document).on('pageshow', '#page', function (){ 
     /*do stuff*/ 
}).on('click', '.openBulk', function(){
     $('.bulk').show().find('.close').click(function(){
          $(this); //Refer to clicked '.close'

           var parent_bulk = $(this).closest('.bulk');
           //Or also 
           var parent_bulk = $(this).parents('.bulk');
       })
    })
})

注意:您应该将事件附件放在另一个单击事件之外，否则每次单击另一个单击事件时都会附加到.close。

同样，正如@Rory在评论中指出的那样，.closest()和.parents()的操作略有不同。closest()获取第一个匹配的父元素，而parents()获取所有父元素，所以如果您将事件附加到div，最好使用parents()。

希望这能有所帮助。