title: Target next element with specific class attribute
body: <p>I have a table with a dropdown in one column, and hidden DIVs in the next column. Depending on the dropdown value, only one DIV in next column should show.</p>
  
  <p>Here is the layout I have.
  I have been able to target the next <code>&lt;td&gt;</code>, but haven't had luck with an actual <code>&lt;div&gt;</code> inside a <code>&lt;td&gt;</code>.</p>
  
  <p>I am not getting any jquery errors. Thanks!</p>
  
  <pre><code>...
  &lt;tr&gt;
      &lt;!–– Dropdown column ––&gt;
      &lt;td&gt;
      &lt;select class="dropdown"&gt;
          &lt;option value="firstDiv"&gt;Show First&lt;/option&gt;
          &lt;option value="secondDiv"&gt;Show Second&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
  
      &lt;!–– Column with hidden/visible Divs we are targeting ––&gt;
      &lt;td&gt;
          &lt;div class="firstDiv"&gt;First Div&lt;/div&gt;
          &lt;div class="secondDiv"&gt;Second Div&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
      &lt;!–– Dropdown column ––&gt;
      &lt;td&gt;
      &lt;select class="dropdown"&gt;
          &lt;option value="firstDiv"&gt;Show First&lt;/option&gt;
          &lt;option value="secondDiv"&gt;Show Second&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
  
      &lt;!–– Column with hidden/visible Divs we are targeting ––&gt;
      &lt;td&gt;
          &lt;div class="firstDiv"&gt;First Div&lt;/div&gt;
          &lt;div class="secondDiv"&gt;Second Div&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  ...
  
  
  $('.dropdown').change(function() {
          id = this.id;
          value = $(this).val();
  
          $(this).closest("td &gt; .firstDiv").next().hide(); //First hide everything, even if already hidden
          $(this).closest("td &gt; .secondDiv").next().hide(); //First hide everything, even if already hidden
  
          $(this).closest("td &gt; ." + value).next().toggle(); //Show the chosen one
       })
  </code></pre>