Question

my main file is

<div id="man">
//some content
<div id="one">
//some content
<div id="two">
//some content
<div id="three">
//some content
<div id="four">
<a title="to delete">delete</a>
<a title="to reset">reset</a>
<a title="to change">change</a>
</div>...// all div ends...


<div id="woman">
//some content
<div id="one">
//some content
<div id="two">
//some content
<div id="three">
//some content
<div id="four">
<a title="to delete">delete</a>
<a title="to reset">reset</a>
<a title="to change">change</a>
</div>...// all div ends...

and the jquery is –

$("document").ready(function(){
$("a:contains(delete)").click(function(){
alert($(this).parent().parent().parent().parent().parent().attr("id"))
})
})

is there any another way to find the top parent instead of using this…??

Answer 1

If you can modify your html slightly and give those top-level divs a common class:

<div id="man" class="top">
...
<div id="woman" class="top">

…then you can use the .closest() method to select them:

$("a:contains(delete)").click(function(){
   alert($(this).closest('div.top').attr("id"))
})

Note that your current html markup is invalid because you are not supposed to give the same id to more than one element. (So given that you should change your markup to fix that it will be no problem to also add a class to the top-level divs.)

EDIT: Demonstration that the above works even when “man” and “woman” aren’t at the top level: http://jsfiddle.net/NVQXq/