title: JQuery.Next() with not selector not working as expected
body: <p>I am trying to setup a rotating panel, however I have three states: active, inactive, disabled. </p>
  
  <p>I only want to rotate between active and inactive panels and skip over disabled panels. If there is no more inactive panels rotate back to the first panel. </p>
  
  <p>However with the code below you click the button it will select panel1, then panel 2, and back to panel 1, not selecting panel5.. If I remove the not selector from bold part below it works as expected. I think it's my understanding (or lack thereof) of the next operator. Any thoughts? </p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $("#rotate").click(function () {
              var ActivePanel = $('.active');                 //Get the current active panel 
              var NextPanel = $('.active').next('.inactive:not(.disabled)'); //Get the next panel to be active. 
              if (NextPanel.length == 0) NextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel
  
              console.log("Active Panel: ", ActivePanel);
              console.log("Next Panel: ", NextPanel);
  
              $(ActivePanel).removeClass("active").addClass("inactive");
              $(NextPanel).removeClass("inactive").addClass("active"); 
          });
      });    
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="rotate"&gt;Rotate Active Panel&lt;/button&gt;
      &lt;div id="panel1" class="active"&gt;&lt;p&gt;Some Content&lt;/p&gt;&lt;/div&gt;
  &lt;div id="panel2" class="inactive"&gt;&lt;/div&gt;
  &lt;div id="panel3" class="inactive disabled"&gt;&lt;/div&gt;
  &lt;div id="panel4" class="inactive disabled"&gt;&lt;/div&gt;
  &lt;div id="panel5" class="inactive"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>