獲取子元素的ID並附加到父項

Question

我有一個函數可以從選擇框中創建HTML元素以允許樣式化。下面的代碼：

$.fn.jqTransSelect = function() { 
    return this.each(function (index) { 
     var $select = $(this); 
     if ($select.hasClass('jqTransformHidden')) { 
      return; 
     } 
     if ($select.attr('multiple')) { 
      return; 
     } 
     var oLabel = jqTransformGetLabel($select); 
     var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({ 
      zIndex: 10 - index 
     }); 
     $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>'); 
     var $ul = $('ul', $wrapper).css('width', $select.width() + 10).hide(); 
     $('option', this).each(function (i) { 
      var oLi = $('<li><a href="#" index="' + i + '">' + $(this).html() + '</a></li>'); 
      $ul.append(oLi); 
     }); 
     $ul.find('a').click(function() { 
      $('a.selected', $wrapper).removeClass('selected'); 
      $(this).addClass('selected'); 
      if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { 
       $select[0].selectedIndex = $(this).attr('index'); 
       $select[0].onchange(); 
      } 
      $select[0].selectedIndex = $(this).attr('index'); 
      $('span:eq(0)', $wrapper).html($(this).html()); 
      $ul.hide(); 
      return false; 
     }); 
     $('a:eq(' + this.selectedIndex + ')', $ul).click(); 
     $('span:first', $wrapper).click(function() { 
      $("a.jqTransformSelectOpen", $wrapper).trigger('click'); 
     }); 
     oLabel && oLabel.click(function() { 
      $("a.jqTransformSelectOpen", $wrapper).trigger('click'); 
     }); 
     this.oLabel = oLabel; 
     var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper).click(function() { 
      if ($ul.css('display') == 'none') { 
       jqTransformHideSelect(); 
      } 
      if ($select.attr('disabled')) { 
       return false; 
      } 
      $ul.slideToggle('fast', function() { 
       var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top); 
       $ul.animate({ 
        scrollTop: offSet 
       }); 
      }); 
      return false; 
     }); 
     var iSelectWidth = $select.outerWidth() + 15; 
     var oSpan = $('span:first', $wrapper); 
     var newWidth = (iSelectWidth > oSpan.innerWidth()) ? iSelectWidth + oLinkOpen.outerWidth() : $wrapper.width(); 
     $wrapper.css('width', newWidth); 
     $ul.css('width', newWidth - 7); 
     oSpan.css({ 
      width: iSelectWidth 
     }); 
     $ul.css({ 
      display: 'block', 
      visibility: 'hidden' 
     }); 
     var iSelectHeight = ($('li', $ul).length) * ($('li:first', $ul).height()); 
     (iSelectHeight < $ul.height()) && $ul.css({ 
      height: iSelectHeight, 
      'overflow': 'hidden' 
     }); 
     $ul.css({ 
      display: 'none', 
      visibility: 'visible' 
     }); 
    }); 
}; 

什麼我想要做的就是把原來的選擇框，他們是隱藏之前的ID，和屁股班將它們添加到新創建的$包裝 - 我會怎麼做呢？

謝謝， 克里斯

Answer 1

後：

var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({ 
     zIndex: 10 - index 
    }); 

地說：

$wrapper.addClass($select.attr('id')); 

Here is an example.