?
Solved

jQuery get number from parent div.

Posted on 2011-10-21
7
Medium Priority
?
282 Views
Last Modified: 2012-05-12
Hi,
Can I get the tabs number using jQuery when a button is clicked within that particular div?

Thanks in advance for your help.


<html>
<head>
</head>

<body>

<div id="tabs-1">
<div class="budget_group">Income</div>
<input name="get_tab_number" type="button" />
</div>


<div id="tabs-2">
<div class="budget_group">expense</div>
<input name="get_tab_number" type="button" />
</div>

</body>
</html>
0
Comment
Question by:sabecs
7 Comments
 
LVL 18

Expert Comment

by:nap0leon
ID: 37007498
This should return the parent's ID that you can then parse for the number:

$(this).parent().attr("id");
0
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 37007514
$('input:button').click(function(){
$(this).parent().id;<-this will get you the id of the parent element,ie the div, of the button that was clicked
});
0
 
LVL 18

Assisted Solution

by:nap0leon
nap0leon earned 600 total points
ID: 37007549

<html>
<head>
</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<body>

<div id="tabs-1">
<div class="budget_group">Income</div>
<input name="get_tab_number" type="button" onclick="alert($(this).parent().attr('id'));"/>
</div>


<div id="tabs-2">
<div class="budget_group">expense</div>
<input name="get_tab_number" type="button" onclick="alert($(this).parent().attr('id'));"/>
</div>

<script  type="text/javascript">
function returnID(){
 alert($(this).parent().attr('id'));
}
<script>

</body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 18

Expert Comment

by:nap0leon
ID: 37007554
bleh - leftover code in the post above
<html>
<head>
</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<body>

<div id="tabs-1">
<div class="budget_group">Income</div>
<input name="get_tab_number" type="button" onclick="alert($(this).parent().attr('id'));"/>
</div>


<div id="tabs-2">
<div class="budget_group">expense</div>
<input name="get_tab_number" type="button" onclick="alert($(this).parent().attr('id'));"/>
</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:sabecs
ID: 37009539
Thanks for your help, the only code I can get to work is from nap0leon.
But I would prefer it within a function and also I just need the number returned , example "1" instead of "tab-1"
0
 
LVL 11

Accepted Solution

by:
mcnute earned 1400 total points
ID: 37010727
Put your tabs into a container div and then get the index of the tab and add 1 to it. The index starts at 0 so you need to do a +1 to the returned index.


<html>
<head>
</head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 

    $('.indexbutt').click(function(){
    indexof = $(this).parent().prevAll().length;
    alert(indexof+1);
    
    });
    

});
</script>
<body>
<div id="container">
<div id="tabs-1" class="tabs">
<div class="budget_group">Income</div>
<input name="get_tab_number" type="button" class="indexbutt"/>
</div>


<div id="tabs-2" class="tabs">
<div class="budget_group">expense</div>
<input name="get_tab_number" type="button" class="indexbutt"/>
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:mcnute
ID: 37010735
I forget to say. You have to give your buttons a class. This saves you trouble with the distinction of the button through the name or id.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question