This is my graphic design portfolio site and I'm having a bit of trouble with my filter. I've created it using jQuery and classes. When one clicks on a link it hides all the '.tags' that aren't it. All of this works correctly. (Lines 5-19)
Starting on line 21, I've created a function that dynamically adds a div and content below the item. It finds how many elements exist, the position of the current element, and finds the position the new div should be inserted (at the end of the 3 column row). All of this works correctly on its own.
The problem is that when some '.tags' are filtered, the second function doesn't correctly find the position of the current element. It's because I'm not actually removing the elements from the source code, simply hiding them - I want to keep it that way so I don't need to keep reloading the content.
var portfolio = '#portfolio > a';
var elements = $(portfolio).children(':visible').length; //finds how many elements are in the portfolio
var getPosition = $(portfolio).siblings('a :visible').addBack().index(this); //find the position of the div
The above code is the problem area (lines 25-26), but here's the entire code for reference: http://jsfiddle.net/cQUMs/5/
My variable elements has no trouble getting the correct number of elements whether the filter is used or not. getPosition gets the right position before anything is filtered, but retains that number; I need it to update dynamically.
The problem is that the this you're indexing against is an a element. So try this (updated demo):
//find the position of the div
var getPosition = $(portfolio).children(':visible').index( $(this).children() );