Jquery .next() is not working when I'm trying to hide the div
<p>I'm trying to hide a div if certain value are selected in a drop down. I'm using 
<code>$(this).next('.selectNos').hide();</code> but it won't do the job for some reason. Please can someone point out what I'm doing wrong?</p>

<pre><code>$(document).ready(function() {
  $('#addCondition').on('change','.conOperatorC', function(e){       
    if ($('option:selected',this).text() == "In" || $('option:selected',this).text() == " Not In")  {
    alert($('option:selected',this).text());
    $(this).next('.selectNos').hide();
    }
    else {
    $(this).next(':select').hide(); 
    }
});
$('.conOperatorC').trigger('change');
});

&lt;div id="addCondition"&gt;
&lt;select id="conOperator0" name="conOperator0" class="standard_select conOperatorC" style="width:147px;"&gt;
      &lt;option&gt;blah&lt;/option&gt;&lt;option&gt;
      &lt;option&gt;Contains&lt;/option&gt;
      &lt;option&gt;In&lt;/option&gt;
      &lt;option&gt;Not In&lt;/option&gt;
&lt;/select&gt;

&lt;input type="text" id="conValue0" name="conValue0" class="short_input" value="" style="width:147px;"&gt;

&lt;div class="selectNos"&gt;
    &lt;select id="conValuedd0" multiple="multiple" size="5" style="display: none; "&gt;
       &lt;option value="option1"&gt;blah&lt;/option&gt;
       &lt;option value="option2"&gt;blah&lt;/option&gt;
    &lt;/select&gt;
    &lt;button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" tabindex="0" style="width: 225px; "&gt;&lt;span class="ui-icon ui-icon-triangle-2-n-s"&gt;&lt;/span&gt;&lt;span&gt;Please Select&lt;/span&gt;&lt;/button&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>
