使用JQuery获得父母的父母

Question

我有一个消失的删除动画代码，我想让整个div“parent_parent”消失。

下面是HTML

<div class="parent_parent"> 
    <div class="parent"> 
     <a href="?delete=1" class="delete_link"></a> 
    </div> 
</div> 

这里是jQuery代码，使parent_parent DIV消失的一部分：

$(document).ready(function() { 
    $('a.delete_element').click(function(e) { 
     e.preventDefault(); 
     var parent = $(this).parent(); 
     $.ajax({ 
      type: 'get', 
      url: 'delete.php', 
      data: 'ajax=1&delete=' + parent.parent().attr('id').replace('sort_', ''), 
      beforeSend: function() { 
       parent.parent().animate({ 
        'backgroundColor': '#fff' 
       }, 300); 
      }, 
      success: function() { 
       parent.parent().slideUp(300,function() { 
       parent.parent().remove(); 
       }); 
      } 
     }); 
    }); 
});​ 

但到目前为止，没有动画发生，但如果我只需要调用一个父母然后内部div消失。我也没有收到任何错误消息。

Answer 1

你的代码对于你所要做的事情仍然太复杂。这是更好的：

// $(function(){ is shorthand for $(document).ready(function(){ 
$(function() { 
    $('a.delete_element').click(function(e) { 
     e.preventDefault(); 
     // Don't give thing ambiguous names like 'parent' 
     // You should change your class names too. 
     var container = $(this).closest(".parent_parent"); 
     $.ajax({ 
      type: 'get', 
      url: 'delete.php', 
      // You had multiple instances of parent.parent(), but no direct usage of parent alone 
      // This is a clue that you can simplify parent.parent() since you are traversing to the same element every time 
      data: 'ajax=1&delete=' + container.attr('id').replace('sort_', ''), 
      beforeSend: function() { 
       containter.animate({ 
        'backgroundColor': '#fff' 
       }, 300); 
      }, 
      success: function() { 
       container.slideUp(300, function() { 
        // Do not repeat the same selector within a callback 
        // That's what `this` is for 
        $(this).remove(); 
       }); 
      } 
     }); 
    }); 
});​ 

如果您使用此代码示例，它将工作。

Answer 2

您可能不会阻止默认锚标记操作。您可能还想要缓存将要多次使用的引用。这里的工作代码：

function(e) { 
    e.preventDefault(); 
    var theParent = $(this).closest(".parent_parent");  
    theParent.slideUp(300, function() { 
     theParent.remove(); 
    }); 
}; 

小提琴：http://jsfiddle.net/VXEUM/

还请注意，我使用closest()而不是在parent()翻倍的。只是一种风格偏好。此外，如果你的元素嵌套更深，它仍然可以使用closest()。