roNn23 roNn23 - 3 months ago 11
jQuery Question

How to pass an additional argument to jQuery filter function

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

You can use closure for this:

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