選擇標記元素的HTML不反映它的選擇選項

Question

我正在重新排序（我知道，無序列表不應該有一個訂單，但我想用JQuery UI的排序，它只能用ul）a列表中，每個列表項目如下所示。排序列表項的代碼也在下面。我的問題是每個選擇標記的選定選項都會丟失。有沒有辦法在不丟失這些信息的情況下移動這些元素？我需要跟蹤它在JavaScript中嗎？這將是一個痛苦，因爲每個項目有3個選擇。

<ul id="slotHtml"> 
    <li class="energySlot"> 
     <span class="energyHandle"></span> 
     At 
     <select class="startTime"> 
      <option value="0">12:00 AM</option> 
      <option value="23">11:00 PM</option> 
     </select> 

     enter 

     <select class="sleepType" onchange="sleepTypeChange(this)"> 
      <option value="wake"> Wake Up!!! </option> 
      <option value="sleep"> Sleep!!! </option> 
      <option value="deep"> Deep Sleep!!! </option> 
     </select> 

     <span class="inactivitySpan" style="display:none;"> 

      after 

      <!-- this is for sleep --> 
      <select class="sleepAfter" style=""> 
       <option>1</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 

      <!-- this is for deep sleep --> 
      <select class="deepSleepAfter" style="display:none;"> 
       <option>1</option> 
       <option>3</option> 
       <option>5</option> 
      </select> 

      minute(s) of inactivity 

     </span> 

     <a class="energySaveEditorAdd" onclick="AddEnergySlot()">Add</a> 
     <a class="energySaveEditorRemove" onclick="RemoveThisEnergySlot(this)">Remove</a> 
    </li> 
</ul> 

這裏是我的排序代碼（JavaScript）的

function SortSlots() { 
    debugger; 
    var slots = $('#energySlots').children(); 
    var slotTimes = []; 
    // add to map, also build array of the values. 
    var slotMap = new Object(); 
    for (var i = 0; i < slots.length; i++) { 
     var timeVal = parseInt($(slots[i]).find('.startTime').val()); 
     slotMap[timeVal] = $(slots[i]).wrap('<p/>').parent().html(); // wrap/unwrap to get the container in the html 
     $(slots[i]).unwrap(); 
     slotTimes.push(timeVal); 
    } 
    slotTimes.sort(sortNumber); 
    var html = ''; 
    for (var i = 0; i < slotTimes.length; i++) { 
     html += slotMap[slotTimes[i]]; 
    } 

    $('#energySlots').empty(); 
    $('#energySlots').append(html); 
} 

Answer 1

與jQuery對象和/或DOM元素，而不是html字符串工作。

slotMap[timeVal] = slots[i]; 

/* ... */ 

for (var i = 0; i < slotTimes.length; i++) { 
    $('#energySlots').append(slotMap[slotTimes[i]]); 
}