並べ替えられていないリストメニューをjQueryでドロップダウンメニューに変換するときにIDを追加するには

Question

ナビゲーションリンクが特定の画面サイズでドロップダウンメニューに変わるレスポンシブなレイアウトを作成しようとしています。私は次のコードを使用していますhere：

$(function() { 
$('ul.selectdropdown').each(function() { 
    var $select = $('<select />'); 

    $(this).find('a').each(function() { 
     var $option = $('<option />'); 
     $option.attr('value', $(this).attr('href')).html($(this).html()); 
     $select.append($option); 
    }); 

    $(this).replaceWith($select); 
}); 
}); 

これは私が望むように動作します。ただし、リスト項目が元々持っていたIDは保持されません。元のIDを保持するか、作成された各オプションごとに一意のIDを出力します。

これを行う簡単な方法はありますか？

Answer 1

新しく作成されたoptionsにIDを割り当てているようではありません。次のコードでは、<li>要素のIDが<a>ではないと仮定しています。

変更

$option.attr('value', $(this).attr('href')).html($(this).html()); 

$option.attr('value', $(this).attr('href')).html($(this).html()).attr('id', $(this).parent().attr('id'));