jQuery找到下一个锚元素并隐藏它？

Question

我有一个页面，重复锚

<div id ="div1"> 
<a class='button id='edit1'>Edit</> 
<a class='button id='Close'>Close</a> 
</div> 
<div id ="div2"> 
<a class='button id='edit2'>Edit</> 
<a class='button id='Close'>Close</a> 
</div> 
<div id ="div3"> 
<a class='button id='edit3'>Edit</> 
<a class='button id='Close'>Close</a> 
</div> 

当我点击编辑锚我需要找到下一个锚关闭与div和隐藏的。

这就是我的尝试。

var anchors = $("a[class='button']"); 
    var position = anchors.index($('a[id=edit' + ID + ']')); 
    var next = anchors.get(position + 1); 
**next.hide();** // Can i hide like this. 

有什么建议吗？

如果你注意到了我接近锚将有一个共同的ID，所以我可以具体跟ID

更多详细信息我可以做一个函数

function abc(id){ 
$('a[id=edit' + id + ']').next('.change').hide(); 
} 

Answer 1

<div id ="div1"> 
<a class='button edit' id='edit1'>Edit</a> 
<a class='button Close'>Close</a> 
</div> 

添加edit类

$("a.edit").click(function(){ 
$("a.Close").show(); //show the previously hidden element 
$(this).next("a").hide(); //hide the intended one 
}); 

DEMO

Answer 2

使用next（）函数中jquery

$(".edit").click(function(){ 
    $(this).next(".close").hide(); 
}); 

而btw你不能在几个项目上有相同的ID。改为使用class。

Answer 3

看一看这个fiddle

HTML：

<div id ="div1"> 
<a class='button edit' id='edit1'>Edit</a> 
<a class='button close' id='close1'>Close</a> 
</div> 
<div id ="div2"> 
<a class='button edit' id='edit2'>Edit</a> 
<a class='button close' id='close2'>Close</a> 
</div> 
<div id ="div3"> 
<a class='button edit' id='edit3'>Edit</a> 
<a class='button close' id='close3'>Close</a> 
</div> 

JS：

$('.edit').click(function() { 
    $(this).next('.close').hide(); 
});