title: Target last visible div after js action?
body: <p>Is it possible to target the last visible div/container after a js function has worked, in this case <a href="https://mixitup.kunkalabs.com" rel="nofollow noreferrer">mixitup</a> plugin. You click to filter your results, this adds <code>display: none</code> or <code>display: inline-block</code> to the appropriate containers.</p>
  
  <p>Using this code from <a href="https://stackoverflow.com/questions/5275098/a-css-selector-to-get-last-visible-div">another stack question</a></p>
  
  <pre><code>$(function () {
      var $items = $($(".partners_list.container article.mix").get().reverse());
  
      $items.each(function () {
          if ($(this).css("display") != "none") {
              $(this).addClass("red");
              return false;
          }
      });
  });
  </code></pre>
  
  <p>It works but only when the page first loads, after you active the mixitup and filter some results it doesn’t add the class red to the last ‘visible’ container i assume because its already loaded and done its job.. </p>
  
  <p>The mix it function is as follows..</p>
  
  <pre><code>$(function(){
      var $filterSelect = $('#FilterSelect'),
      $container = $('#partner_container');
  
      $container.mixItUp({
          animation: {
              enable: false       
          }
      });
  
      $filterSelect.on('change', function(){
          $container.mixItUp('filter', this.value);
      });           
  });
  </code></pre>
  
  <p>So essentially need it to fire based on when the <code>display: none</code> and <code>display:inline-block</code> appears and disappears on the page.</p>