Jquery need to get id of div that button is pressed

I have the below code.  When I click a button I need to get the outer most div it is in.  So if I clicked the show button I would want to get "button1",  click the List button and I would want Button2 ... and so on

New to jQuery


<div id="button1">
    <div id="inner1">
        <input id="Show" type="button" class="gbtn" value="show" />
    </div>
</div>

<div id="button2">
    <div id="inner2">
        <input id="List" type="button" class="gbtn" value="List" />
    </div>
</div>

<div id="button3">
    <div id="inner3">
        <input id="Clear" type="button" class="gbtn" value="Clear" />
    </div>
</div>


<div id="button4">
    <div id="inner4">
        <input id="Toggle" type="button" class="gbtn" value="Toggle" />
    </div>
</div>

<script type="text/javascript">

        $('#Show').click(function () {  // need help here
            alert(this.id);   //  what is the out div
        });

</script>

Open in new window

Charles BaldoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Najam UddinCommented:
try

$(this).parent().parent().closest('div')

Open in new window


please put checks for undefined
Rainer JeschorCommented:
Hi,
this will work:
$(document).ready(function() {
    $('#Show').click(function () {  // need help here
            alert($(this).parents("div").last().prop("id"));   //  thats the outest div
        });
});

Open in new window

Live sample:
http://jsfiddle.net/EE_RainerJ/4q003aa0/

Explanation:
From the button we go up the DOM tree "collecting" each DIV via the parents() function and then we take the last one which is the most outer div.

HTH
Rainer

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
eemitCommented:
Try this:
$(document).ready(function($){
	$('#Show').click(function (event) {
                var outerID, outestID;

        	//var outerID = $( event.target ).parent().attr('id');
        	var outestID = $( event.target ).parents('div').last().attr('id');

		//alert ( outerID );		
                alert ( outestID );
	});
});

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
There are two additional ways of solving this
1. You have access to the markup in which case give the <div>'s you want to target a class for instance
<div id="button1" class="target-div">>
    <div id="inner1">
        <input id="Show" type="button" class="gbtn" value="show" />
    </div>
</div>

<div id="button2" class="target-div">
    <div id="inner2">
        <input id="List" type="button" class="gbtn" value="List" />
    </div>
</div>

Open in new window

You can then target the <div> with this code
JavaScript
$(function() {
  $('.gbtn').click(function() {
    alert($(this).closest('.targetDiv').attr('id'));
   });
});

Open in new window

2. If you cannot change the markup then you can use a wildcard to select the closest parent.
We know the id's of the targets start with the word button so we can target like so
$(this).closest('div[id^=button]');

Open in new window


Working sample here
Charles BaldoSoftware DeveloperAuthor Commented:
Thank You
Julian HansenCommented:
When I click a button I need to get the outer most div it is in.
Not to take anything away from Rainer but the accepted solution works only for the Show button - whereas the question seemed to indicate that the requirement was to get the grandparent ID of ANY button pressed - which the accepted solution does not do.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.