Question

I have a Page with repeating anchors

<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>

when i click Edit Anchor I need to find the next Close anchor with in the div and hide is.

This is how i tried it.

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.

any suggestions?

if you have noticed my close anchor will have a common id so i can be specific with ID

More Details Can i do it in a function

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>

add an edit class

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

DEMO