determine tab index from id
I am working on a project with dynamically created tabs. Here is the
situation:
A user has several links which can be clicked to open various tabs.
There is no set order to which link will be clicked, so the ultimate
tab index configuration is unknown. Normally this wouldn't be an
issue, except I wish for the user to be able to close the tabs they
created and re-open them later. Here's an example:
HTML:
<a id="newtab">new tab</a>
JS:
$("#newtab").click(function() {
if (!$(this).hasClass("shown")) {
$("#forums > ul").tabs("add", '#newtab-frag', 'New Frag <a
id=\"newtab-close\">close<\/a>');
$(this).toggleClass("shown");
}
$("#newtab-close").click(function() {
alert("hi");
});
So, this works great -- the user clicks, the tab opens, and if they
click again nothing happens. If they click "close", the alert pops
up.
Now, here's the quandry. I would love for the user to click "close"
and remove the tab. But we have no idea what the index of this tab
is. It could be the first tab, it could be the 6th tab!
So, the question is -- is there any feasible way to determine the tab
index based on the tab ID? Somehow tabs knows which tab corresponds
to which index for when you pass it an index value... but since none
of the tabs ids have anything to do with the index value, there's got
to be some translation going on in the background.
I look forward to hearing from all of you! This plugin and jQuery in
general has been awesome so far.