jquery只显示孩子

Question

我有一个问题：为了简单起见，我在div上使用类，我想在点击后显示一个隐藏的div，但只在该div上，问题是它显示在所有div上，而我似乎无法得到它的工作，这里是与问题的jsfiddle：http://jsfiddle.net/cWNvT/

HTML：

<div class="left"> 
    <a href="#" class="edit-click">Edit</a> 
    <div class="edit"> 
     <p>edit here</p> 
    </div> 
</div> 
<div class="left"> 
    <a href="#" class="edit-click">Edit</a> 
    <div class="edit"> 
     <p>edit here</p> 
    </div> 
</div> 
<div class="left"> 
    <a href="#" class="edit-click">Edit</a> 
    <div class="edit"> 
     <p>edit here</p> 
    </div> 
</div> 

的JavaScript：

$(document).ready(function() { 
    $('.edit').hide(); 
    $('.left a.edit-click').click(function() { 
     $('.left').children().show(); 
    }); 
});​ 

任何人有一个解决方案？

Answer 1

试试这个工作fiddle。

$(document).ready(function() { 
$('.edit').hide(); 
$('.left a.edit-click').click(function(){ 
    $(this).parent().children().show(); 
}); 
}); 

我所做的是使用$(this).parent()而不是用$(".left")选择的。

Answer 2

尝试发现只有点击的元素的父，并使用其孩子：

http://jsfiddle.net/cWNvT/1/

$(document).ready(function() { 
    $('.edit').hide(); 
    $('.left a.edit-click').click(function(){ 
     $(this).closest(".left").children().show(); 
    }); 
}); 
​ 

$(".left")选择文档中与.left类的所有元素。 $(this).closest(".left")找到类别为.left的点击链接的第一个父级。

Answer 3

你的代码改成这样：

$('.left a.edit-click').click(function(){ 
    $(this).next('.edit').show(); 
}); 

http://jsfiddle.net/cWNvT/3/