Question

我正在重新排序（我知道，无序列表不应该有订单，但我想使用JQuery UI的可排序，它只能使用ul）列表，每个列表项如下所示。列表项的排序代码如下。我的问题是每个选择标记的选定选项都会丢失。有没有办法在不丢失这些信息的情况下移动这些元素？我需要在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]]);
}

select标签元素的html不反映它的选定选项

1 个答案: