Ask Ben: Displaying The Next Hidden Element Using jQuery (Update)

This is just a quick update to my previous post on iterating over an array in jQuery. After I posted the solution this morning, it was mentioned that we might want to update it to allow visible elements to be hidden and then re-shown via the button click. The update to this is small and actually simplifies the code - rather than keeping an internal index of the next item to be shown, we are simply going to show the first hidden element in our jquery stack:

The magic sauce here is the way in which we locate the element to show once the button has been clicked:

var jHidden = objConfig.Collection.filter( ":hidden:first" );

The filter() method takes our original collection and returns a sub-collection of elements that match the given selectors. This filter uses two selectors, :hidden, which finds all invisible elements (or Inputs of type=hidden), and :first, which limits the collection to the first match. Now, because jQuery methods are not destructive (meaning that they return a new jQuery stack leaving the original jQuery stack unaltered), we can be sure that this filter does not change our Collection variable in any way. Thanks to this behavior, we can call this filter() method each time the button is clicked and it will always be searching the same master collection.