用jquery將圖標添加到按鈕文本

Question

所以我有一個下拉菜單，它出自下面的一個按鈕。我已經爲每個列表選項添加了一個字體超讚的圖標。我已經使用jQuery來更改基於選擇的按鈕（和顏色）的文本，但我似乎無法弄清楚如何將相關列表項的圖標添加到按鈕文本，這將看起來真的很好我正在努力。我應該將圖標作爲數據屬性嗎？

這裏是我的HMTL：

<div class="btn-group col-sm-offset-1 col-sm-11"> 
     <a id="post-type-select-button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-target="#">Select a type of post &nbsp; <span class="caret"></span></a> 
      <ul id="post-type-menu" class="dropdown-menu" style="margin-left: 16px;"> 
        <li data-color="#FFFFAA" class="alert-li" id="A"><a tabindex="-1" href="#" align="left">Alert<i class="fa fa-warning pull-right" style="margin-top:3px"></i></a></li> 
        <li data-color="#99D699" class="report-li" id="RP"><a tabindex="-1" href="#" align="left">Report<i class="fa fa-file-text pull-right" style="margin-top:3px"></i></a></li> 
        <li data-color="#C8ECFF" class="review-li" id="RV"><a tabindex="-1" href="#" align="left">Review<i class="fa fa-star-half-empty pull-right" style="margin-top:3px"></i></a></li> 
        <li data-color="#FF9494" class="question-li" id="Q"><a tabindex="-1" href="#" align="left">Question<i class="fa fa-question pull-right" style="margin-top:3px"></i></a></li> 
      </ul> 
     </div> 

這裏是我的jQuery：

$("#post-type-menu li").click(function() { 
       $("#post-type-select-button:first-child").text($(this).text()); 
       $("#post-type-select-button").css("background-color",$(this).data("color")); 
       $("#post-type-select-button").css("color","#555555");      
      }); 

任何幫助誠摯的謝意！

Answer 1

使用$('#post-type-select-button i')選擇器，並將其類改爲任何你想要的。例如。

$('#post-type-select-button i').attr('class', 'fa fa-info');