JQUERY - using has class to show/hide rows results in lag and performance hit : I have a quite large html table that I am showing/hiding rows based on their class. The code works as desired, but there is around a 10 second lag/freeze of the client. Any help or pointers on fixing this performance issue would be appreciated. Please note amount of departments in my example could be dynamic, hence some of the reasoning of the crazy table structure. 

Here is my [JSFIDDLE][1]


    $(function() {
      $("#deptOpt").on('change', function() {
        var dept = $(this).prop('selectedIndex');
        $("#scLDP > tbody > tr").each(function() {
          var x = $(this);
          switch (dept) {
            case 0:
              $("#scLDP > tbody > tr").show();
              break;
            default:
              $("#scLDP > tbody > tr").hide();
              $("#scLDP > tbody > .onHand.dept" + dept).prev().prev().show();
              $("#scLDP > tbody > .onHand.dept" + dept).prev().show();
              $("#scLDP > tbody > .onHand.dept" + dept).show();
              $("#scLDP > tbody > .onHandQ.dept" + dept).show();
              $("#scLDP > tbody > .poss.dept" + dept).show();
              $("#scLDP > tbody > .posq.dept" + dept).show();
              $("#scLDP > tbody > .wos.dept" + dept).show();
              $("#scLDP > tbody > .stP.dept" + dept).show();
              $("#scLDP > tbody > .twmd.dept" + dept).show();
              $("#scLDP > tbody > .grandT").show();
              $("#scLDP > tbody > .onHandGrand").show();
              $("#scLDP > tbody > .onHandQGrand").show();
              $("#scLDP > tbody > .possGrand").show();
              $("#scLDP > tbody > .posqGrand").show();
              $("#scLDP > tbody > .wosGrand").show();
              $("#scLDP > tbody > .stpGrand").show();
              $("#scLDP > tbody > .twmdGrand").show();
              break;
          }
        })
      })
    })


  [1]: https://jsfiddle.net/khemikal/qxdwrq7x/8/