title: Javascript .find() not working under all the IE browser
body: <p>I have some JS code converts all the HTML dropdown to a bootstrap dropdown:</p>
  
  <pre><code>jQuery(function($){
      $('#primary').each(function(i, e) {
          if (!($(e).data('convert') == 'no')) {
              $(e).hide().wrap('&lt;div style="display:inline-block;" class="btn-group" id="select-group-' + i + '" /&gt;');
              var select = $('#select-group-' + i);
              var current = ($(e).val()) ? $(e).val(): 'Category';
  
              select.html('&lt;input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /&gt;&lt;a data-toggle="dropdown" style="border-radius:4px 0px 0px 4px; margin-right:0px;" class="btn" href="javascript:;"&gt;' + current + '&lt;/a&gt;&lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;&lt;ul style="max-height:300px; overflow-y:scroll; overflow: -moz-scrollbars-vertical;" class="dropdown-menu"&gt;&lt;/ul&gt;');
  
              $(e).find('option').each(function(o,q) {
                  if($(q).attr('value') &gt; 0) {
                      if($(q).attr('value') == 30 || $(q).attr('value') == 17 || $(q).attr('value') == 185 ||  $(q).attr('value') == 196 || $(q).attr('value') == 197 ) {
                          select.find('.dropdown-menu').append('&lt;li style="background-color:#FFFACD;"&gt;&lt;a href="javascript:;" data-value="' + $(q).attr('value') + '"&gt;' + $(q).text() + '&lt;/a&gt;&lt;/li&gt;');
                      } else {
                          select.find('.dropdown-menu').append('&lt;li&gt;&lt;a href="javascript:;" data-value="' + $(q).attr('value') + '"&gt;' + $(q).text() + '&lt;/a&gt;&lt;/li&gt;');
                      }
                  }
                  if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
              });
  
              select.find('.dropdown-menu a').click(function() {
                  select.find('input[type=hidden]').val($(this).data('value')).change();
                  select.find('.btn:eq(0)').text($(this).text());
              });
          }
      });
  });
  </code></pre>
  
  <p>I checked the IE console, there is no error showing up at all...</p>
  
  <p>It's showing up fine in Webkit browsers like safari/Chrome but not IE.
  In IE (IE 10), the dropdown is empty like this: (Empty  in html)</p>
  
  <p><img src="https://i.stack.imgur.com/fkVZ2.png" alt="enter image description here"></p>
  
  <p>Which in safari, it's like this:</p>
  
  <p><img src="https://i.stack.imgur.com/IEyJn.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>UPDATES:</strong></p>
  
  <p>After more debugging, the problem is here...Looks like the line <code>$(e).find('option').each(function(o,q) {</code> is not working in IE since all the codes inside are not operating.  <strong>The problem is that <code>.find()</code>. I changed it to <code>.children('option')</code> or <code>.children()</code>, all not working in IE.</strong> I'm using jQuery 1.7.2.</p>
  
  <pre><code>$(e).find('option').each(function(o,q) {
  ...
  }
  </code></pre>