I’ve just been working on code to dynamically show/hide columns in a horizontal table to fit the width of the browser, i.e. show 1 column on 320px mobile, but all on desktop etc.
To support this I need to animate the Nth cell from each row concurrently.
Firstly create an empty selector $([]). Apparently $() used to work but functionality has changed between jQuery versions.
Secondly, append jQuery objects to the empty selector using add(). e.g. selector = selector.add(foo). Note add() returns a new selector. The push() method does exist, but this is marked for internal use only.
var cells = $([]); this.table.find("tr").each(function(rowIndex, row) { cells = cells.add($(row).find('th,td').eq(colIndex)); }); cells.animate({ width : '100px' });