title: option:selected not working inside $.map()
body: <p>I've started writing a function to replace select boxes with a custom HTML list. I can't seem to get the ":selected" Selector to be recognize for selected options though. I've tried a few methods and my select box does have options with selected attributes ;]</p>
  
  <p>Any help with this is very appreciated.</p>
  
  <pre><code>$('select').each(function(){
      var $ulSelect = $('&lt;ul /&gt;');
      var $options;
      var $numSelected = 0;
  
      $options = $('option', this).map(function(index, element){
          var $selectedClass = '';
          if ($(element).is(':selected')) {
              $numSelected++;
              $selectedClass = ' class="selected"';
          }
          return $('&lt;li data-value="'+ $(element).val() +'"'+ $selectedClass +'&gt;'+ $(element).text() +'&lt;a href="#" class="x-link"&gt;&lt;/a&gt;&lt;/li&gt;');
      }).appendTo($ulSelect);
  
      var $ulSelectWrap = $('&lt;div /&gt;')
          .addClass('ul-select-wrap')
          .prepend($ulSelect)
          .prepend('&lt;span class="selected"&gt;'+ $('option:eq(0)', this).text() + $activeText +'&lt;/span&gt;');
  
      $(this).hide().before($ulSelectWrap);
  });
  </code></pre>