jQuery Tutorial: Select elements with the same index, across multiple containers

A few days ago I was working on a project where I needed to set the "active" state of <li> elements across multiple containers. These containers were divided into separate tabs, so one could be viewed at a time, but when one container updated, all the others needed to be updated as well.

Check out the instructions and code after the jump!

So, basically, what we're doing is:

• Select all parent containers with the class of "parent", and for each container we "find" all elements with the class "asd".
• Note that all 4 of the parent contains have elements with the same class. This is where the power of jQuery selectors comes into the picture.
• Using $(e.target).index(), we retrieve the "index" of the link that was just clicked. This lets us store the position of the element we clicked.
• Then, we perform some "recursion" and re-select each parent container.
• Inside of each re-selected parent element, we use the previously stored position of what we clicked, to select the proper child element.
• RESULT: If you click item 2, it will select the 2nd item inside every single parent container.