title: Getting initial selector inside jquery plugin
body: <p>I got some help earlier regarding selectors, but I'm stuck with the following.</p>
  
  <p>Lets say you have a plugin like this</p>
  
  <pre><code>$('#box').customplugin();
  </code></pre>
  
  <p>how can I get the #box as a string in the plugin?
  Not sure if that's the correct way of doing it, and any other solution would be great as well.</p>
  
  <p>Considering #box is a select dropdown,</p>
  
  <p>The problem I'm having is if I do the regular javascript</p>
  
  <pre><code>$('#box').val(x);
  </code></pre>
  
  <p>The correct option value gets selected,</p>
  
  <p>but if i try the same inside a plugin</p>
  
  <pre><code>.....
  this.each(function() {
  var $this = $(this);
  
  
  $this.val(x);
  </code></pre>
  
  <p>the last code doesn't really do anything.</p>
  
  <p>I notice I'm having trouble targeting #box inside the plugin because it's a object and not a string...</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks!</p>
  
  <p>Edit:: Putting in the code I'm working in for better understanding</p>
  
  <pre><code>(function($){
  $.fn.customSelect = function(options) {
      var defaults = {
          myClass : 'mySelect'
      };
      var settings = $.extend({}, defaults, options);
  
  
      this.each(function() {
          // Var          
          var $this = $(this);
          var thisOpts = $('option',$this);
          var thisSelected = $this[0].selectedIndex;
          var options_clone = '';
  
          $this.hide();
  
          options_clone += '&lt;li rel=""&gt;&lt;span&gt;'+thisOpts[thisSelected].text+'&lt;/span&gt;&lt;ul&gt;'
          for (var index in thisOpts) {
              //Check to see if option has any text, and that the value is not undefined
              if(thisOpts[index].text &amp;&amp; thisOpts[index].value != undefined) {
                  options_clone += '&lt;li rel="' + thisOpts[index].value + '"&gt;&lt;span&gt;' + thisOpts[index].text + '&lt;/span&gt;&lt;/li&gt;'
              }
          }
          options_clone += '&lt;/ul&gt;&lt;/li&gt;';
  
          var mySelect = $('&lt;ul class="' + settings.myClass + '"&gt;').html(options_clone); //Insert Clone Options into Container UL
          $this.after(mySelect); //Insert Clone after Original
  
          var selectWidth = $this.next('ul').find('ul').outerWidth(); //Get width of dropdown before hiding
          $this.next('ul').find('ul').hide(); //Hide dropdown portion
  
          $this.next('ul').css('width',selectWidth);
  
          //on click, show dropdown
          $this.next('ul').find('span').first().click(function(){
              $this.next('ul').find('ul').toggle();
          });
  
          //on click, change top value, select hidden form, close dropdown
          $this.next('ul').find('ul span').click(function(){
              $(this).closest('ul').children().removeClass('selected');
              $(this).parent().addClass("selected");
              selection = $(this).parent().attr('rel');
              selectedText = $(this).text();
              $(this).closest('ul').prev().html(selectedText);
              $this.val(selection); //This is what i can't get to work
              $(this).closest('ul').hide();
          });
  
      });
      // returns the jQuery object to allow for chainability.
      return this;
  }
  </code></pre>