jquery查找属性id

Question

我有以下JavaScript代码：

$(function() {
var parent = '';
$('a.tip').click(function(e) {
e.preventDefault();
parent = $(this).parent();
$('#deletelink').dialog('open');
return false;
});
$('#deletelink').dialog({
autoOpen: false,
width: 300,
buttons: {
"Ok": function() {
$.ajax({
type: 'post',
url: 'asd',
data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});

我将其与以下html代码一起使用：

    <li class="odd">
    <div class="avatar-container">
        <div class="avatar">
            <div class="imgDelete" id="record-1" style="text-align:center;">
                <a class="tip" href="javascript:void(0);" title="This action cannot be undone!"><span>Delete</span></a>
            </div>
        </div>
    </div>
 </li>
<li class="even">
    <div class="avatar-container">
        <div class="avatar">
            <div class="imgDelete" id="record-2" style="text-align:center;">
                <a class="tip" href="javascript:void(0);" title="This action cannot be undone!"><span>Delete</span></a>
            </div>
        </div>
    </div>
 </li>

上面的html代码是用php循环生成的。

我的问题是，当我点击"Delete“链接时，只有父div向上滑动。我需要让它滑上整个<li>。有什么帮助吗？

Answer 1

parent = $(this).parent();

指的是双亲DIV而不是LI，你需要使用链式双亲，即。.parent().parent()，但是使用任何数量的函数来返回到LI元素

Answer 2

这是因为您选择的是链接的直接.parent()，即<div class="imgDelete"..元素

您需要使用

parent = $(this).closest('li'); 

而不是

parent = $(this).parent();

.closest()在dom层次结构中向上搜索( up )以找到与选择器匹配的下一个元素。在本例中，选择器是'li'，因此它将在DOM层次结构中向上搜索以查找<li>元素。

Answer 3

使用.closest()

$(this).closest('li');

这将为您提供li祖先，单击的元素包含在中。