How to pass an additional argument to jQuery filter function

Question

I've got a for-loop to filter some tables:

for(columnIndex = 1; columnIndex <= contentColumnsNumber; columnIndex++) {
  $clonedTable = $table.clone();

  $clonedTable.find('th, td').filter(function() {
    if($(this).index() === 0 || $(this).index() === columnIndex) {
      return false;
    }

    return true;
  }).remove();

  $clonedTable.appendTo($mobileTablesWrap);
}

JSLint recommends not to create functions within a loop: http://eslint.org/docs/rules/no-loop-func

Because of that, I want to refactor this code. So I've created another method and call those, instead of the inline function:

function getRemovableCells(index, element, columnIndex) {
  if($(this).index() === 0 || $(this).index() === columnIndex) {
    return false;
  }

  return true;
}

function filterTable() {
  [...]

  for(columnIndex = 1; columnIndex <= contentColumnsNumber; columnIndex++) {
    $clonedTable = $table.clone();

    $clonedTable.find('th, td').filter(getRemovableCells).remove();

    $clonedTable.appendTo($mobileTablesWrap);
  }
}

Now, my problem is to get the value of columnIndex. This value is provided by the loop and I need to pass them to the filter function. The filter function got already two arguments named index and element: http://api.jquery.com/filter/#filter-function

So I've tried to pass the variable in the loop but then, the context will be altered. I'm just overwriting the existing arguments and this.

$clonedTable.find('th, td').filter(getRemovableCells(columnIndex)).remove();

Also bind or call / apply doesn't helps me out.

Answer 1

You can use closure for this:

function getRemovableCells(columnIndex) {
  return function(index, element) {
    if($(this).index() === 0 || $(this).index() === columnIndex) {
      return false;
    }
    return true;
  }
}