jQuery building array selector

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'
});