选择标记元素的HTML不反映它的选择选项

我正在重新排序（我知道，无序列表不应该有一个订单，但我想用JQuery UI的排序，它只能用ul）a列表中，每个列表项目如下所示。排序列表项的代码也在下面。我的问题是每个选择标记的选定选项都会丢失。有没有办法在不丢失这些信息的情况下移动这些元素？我需要跟踪它在JavaScript中吗？这将是一个痛苦，因为每个项目有3个选择。选择标记元素的HTML不反映它的选择选项

<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); 
}

来源

2014-02-20 Dave

与问题无关，但将'$（slots [i]）'改为'slots.eq（i）'，更清洁。 –

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

slotMap[timeVal] = slots[i]; 

/* ... */ 

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

来源

2014-02-20 03:30:51

这工作。显然，除了列出的内容外，还必须对算法进行一些更改。谢谢！ – Dave

选择标记元素的HTML不反映它的选择选项

回答

相关问题