Question

我无法选择当前点击的容器元素。

我的Html

<div class="cparent">
foo1
<a href="javascript:void(0);" class="delete">Delete</a>
</div>

<div class="cparent">
foo2
<a href="javascript:void(0);" class="delete">Delete</a>
</div>

我的意思是当我点击删除链接时，相应的容器应该消失。我怎么能这样做？

我尝试了什么！

$(".cparent",this).html('Deleting...').delay(1000).fadeOut();// not working

我的剧本

$(".delete").live("click",function(){
 var cur = $(".delete").index(this);
 $(".cparent").eq(cur).html('Deleting...').delay(1000).fadeOut();
 });

以上一个也不起作用。请查看this Example以获得澄清。

Answer 1

使用parent ^{[API Ref]} 方法：

$(this).parent().html('Deleting...').delay(1000).fadeOut();

将this作为第二个参数传递给jQuery函数将找不到this以上的元素。或者，您可以使用closest ^{[API Ref]} 方法：

$(this).closest('.cparent').html('Deleting...').delay(1000).fadeOut();

Answer 2

使用closest选择直接父级

$(".delete").live("click",function(){
 var cur = $(this);
 cur.closest("div.cparent").html('Deleting...').delay(1000).fadeOut();
 });

这里是小提琴http://jsfiddle.net/szVKD/10/

jquery closest

Answer 3

$('div.cparent').click (function (e)
{
    if ($(e.target).attr ('class') == 'delete')
    {
        $(this).html('Deleting...').delay(1000).fadeOut();
    }
}
);

小提琴here

Answer 4

尝试使用parent()：

$(this).parent().html('Deleting...').delay(1000).fadeOut();

你可以看到它在这里工作：

http://jsfiddle.net/gchoken/YFMZW/1/

Answer 5

您使用的方法似乎比它需要的更复杂。

尝试使用此作为处理程序，它更精确，更易于阅读：

$(this).parent(".cparent").html('Deleting...').delay(1000).fadeOut();

如何在jQuery中选择这个容器元素

5 个答案: