Question

How do I get the nth-child param value with a class selector that is equal to “active” in jQuery?

I’m not sure if this is logical but I want to determine which of the list of dd elements that I have is currently selected through the nth-param value.

The code is actually a loop of vertical tabs from Foundation’s Vertical Tabs.

<dl class="vertical tabs">  
<?php foreach($tabs as $key):?>
    <dd id="ver_tab"><a href="javascript:void(0)" onclick="ajaxFunc('<?php echo ($key['group_name']) ?>')" id="ver_tab_a"><?php echo ucwords($key['group_name']);?></a></dd>        
<?php endforeach ?>
    <dd><a id="new_group_button" href="#new_group_form">+ New Group</a></dd>

I have a list of tabs with data acquired dynamically. I also have a static tab at the bottom which would add a new group. A click on a tab from the dynamically generated tab would add a class with value “active” What I want is when I click the static tab, a modal is open and when I cancel the modal(modal is from Foundation’s Reveal also), the selected tab should revert to the active tab before I click the static tab.

On my jQuery I have:

$("#ver_tab:nth-child("+x+")").attr("class","active");

To revert to the previously selected tab where the x is the nth-child of the selected tab.

Thanks so much!

Answer 1

I finally figured it out after a long search.

Although this answer is on different approach, nevertheless it solve my problem on how to identify the index number of my currently selected tab.

Here’s what I did.
On my:

<dd id="ver_tab"><a href="javascript:void(0)" onclick="ajaxFunc('<?php echo ($key['group_name']) ?>')" id="ver_tab_a"><?php echo ucwords($key['group_name']);?></a></dd>

I added another paramater on the:

onclick="('<?php echo ($key['group_name']) ?>')"

So it looks like:

onclick="('$(this)','<?php echo ($key['group_name']) ?>')"

Then on my ajaxFunc:

function ajaxFunc(x, group_name){
    var pos = x.closest("dd").index;
}

The pos variable should now contain the index value of currently selected tab.

Thanks to this post Jquery index can't find element (-1) wrong input (with live function)! Save me so much time!