Question

我有以下内容（基本上，schedule_box是包装器，并且根据需要可以有尽可能多的client_schedule div。我默认隐藏.details，我希望details在点击向下箭头时显示：

<div class="schedule_box">
    <div class="client_schedule">
        <span class="edit"> 
            <img src="images/manage_companies/down-icon.png" class="down">
        </span>
        <span class="details">
            test
        </span>
    </div>
   <div class="client_schedule">
        <span class="edit"> 
            <img src="images/manage_companies/down-icon.png" class="down">
        </span>
        <span class="details">
            test
        </span>
    </div>
</div>

JQuery （当我使用整个联系人框时，它可以工作）：

$('.schedule_box').find('.details').hide().end().find('.down').click(function() {
}

但是，当我尝试使用.down时，它在查找.details时遇到了问题：

$('.schedule_box').find('.details').hide().end().find('.down').click(function() {
     var details = $(this).find('.details');
     if (details.is(':visible')) {
         details.slideUp();
     } else {
         details.slideDown();
     }
});

Answer 1

您需要在适当的find父div：

的上下文中使用".client_schedule"

var details = $(this).parent('.client_schedule').find('.details');

那是因为this内部点击事件处理程序是被点击的图像 - 显然它没有".details" div作为其后代。另一方面，它的父".client_schedule" div具有。

Answer 2

您想要找到.down的父级的下一个兄弟：

var details = $(this).parent().next();

或者，您可以一直到.client_schedule并找到.detail：

var details = $(this).closest(".client_schedule").find(".detail");

注意：您希望.closest()使用此方法，而不是.parent()或.parents()。 .parent()仅检索直接父级，.parents()应该命名为.ancestors()，因为它会检索与选择器匹配的每个祖先。 .closest()为您提供与选择器匹配的第一个祖先。

Answer 3

试

var details = $(this).parents('.client_schedule').find('.details');

Answer 4

您可以通过直接将处理程序分配给.client_schedule元素并测试所点击的内容来执行一些小事件委派。

$('.client_schedule').click(function( e ) {

    if( $(e.target).is('img.down') ) {
         var details = $(this).find('.details');
         if (details.is(':visible')) {
             details.slideUp();
         } else {
             details.slideDown();
         }
    }

}).find('.details').hide();

您还可以使用slideToggle()^[docs]方法稍微减少代码：

示例： http://jsfiddle.net/REJ6Z/

$('.client_schedule').click(function( e ) {

    if( $(e.target).is('img.down') ) {
         $(this).find('.details').slideToggle();
    }

}).find('.details').hide();

Jquery：在DIV中查找元素

4 个答案: