Reapplying jquery-match-height after isotope grid is filtered

Question

I am using jquery-match-height to match the heights of an inner div inside the grid items of an isotope layout, and this is working perfectly when the isotope grid loads.

However when I filter the grid, the divs are no longer being processed by the matchheight script, every one of them returns to its original height.

I have tried:

  $grid.on( 'arrangeComplete', function() { 
   console.log("OK, arrangeComplete");
   $.fn.matchHeight._update();
   //$('.card-text').matchHeight(); //Here I tried simply re-initiating... no effect
  });

Also I tried:

if (!$grid.data('isotope').filteredItems.length ) {
 $.fn.matchHeight._update();
}

I simply cannot get matchheight to "refire"

Answer 1

it's not a perfect way but you can try this:

setInterval(function(){
  $(function() {
    $('.item').matchHeight(options);
  });
} , 300);

Answer 2

OK, I am not at all sure this is the most elegant approach, but it has worked.

The crux here was realising that the new code had to run only after the filter had finished, and that I should only match the heights of visible elements (since the filter doesn't remove the items that don't match the filter, it simply sets them to "display:none"

//Filter complete
$grid.on( 'arrangeComplete', function( event, filteredItems ) {
  //matchheight on the visible items 
  $('.item:visible').matchHeight(); 
  //And re-layout the grid  
  $grid.isotope('layout'); 
});