Javascript 分类<；选择>；选项在页面加载时生成的选项排序不同于客户端添加的选项？

我在select中创建了一个事件列表，它在php中生成选项markup server-side，并将它们回显到客户端。在服务器端创建的选项只有常规属性以及打开和关闭选项标记之间的文本，没有什么特别之处

<option value="myvalue" data-sort="mysortcriteria" class="myclasses">mytext</option>

其中，sort_by_date是我的自定义javascript排序函数：

var event_list_json = [{date="somedate"},{date="somedate"},{date="somedate"}]
event_list_json.sort( sort_by_date );

function sort_by_date(a, b) 
{
    return new Date(a.date).getTime() - new Date(b.date).getTime();
}

执行后，它已对选择进行排序，但旧选项与旧选项一起排序，在顶部，新选项与新选项一起排序，但未一起排序。。。我肯定我以前做过，但不管出于什么原因，这不起作用？？？我使用的是jQuery UI，但我不会仅仅使用本机JavaScript通过小部件进行任何调用

输出看起来是这样的，除了以某种方式添加到旧选项中的额外“样式”，它们是相同的，但您可以看到它们在排序时没有混合在一起

<ol id="selectable" class="ui-selectable">
    <li class="ui-widget-content ui-selectee" data-sort="Mar 22, 2012">Mar 22, 2012 - Dinner in Duncan</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 7, 2012" style="">May 7, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 10, 2012" style="">May 10, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 12, 2012" style="">May 12, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 29, 2012" style="">May 29, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 30, 2012" style="">May 30, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 31, 2012" style="">May 31, 2012 - Breakfast in Victoria</li>
</ol>

2012年3月22日-邓肯晚宴
2012年5月7日-维多利亚早餐
2012年5月10日-维多利亚早餐
2012年5月12日-维多利亚早餐
2012年5月29日-维多利亚早餐
2012年5月30日-维多利亚早餐
2012年5月31日-维多利亚早餐

原始列表如下所示：

<ol id="selectable" class="ui-selectable">
    <li class="ui-widget-content ui-selectee" data-sort="May 12, 2012" style="">May 12, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 10, 2012" style="">May 10, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 7, 2012" style="">May 7, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 30, 2012" style="">May 30, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 29, 2012" style="">May 29, 2012 - Breakfast in Victoria</li>
    <li class="ui-widget-content ui-selectee" data-sort="May 31, 2012" style="">May 31, 2012 - Breakfast in Victoria</li>
</ol>

2012年5月12日-维多利亚早餐
2012年5月10日-维多利亚早餐
2012年5月7日-维多利亚早餐
2012年5月30日-维多利亚早餐
2012年5月29日-维多利亚早餐
2012年5月31日-维多利亚早餐

下面是我为添加元素和对父级排序而执行的操作：

    // Update markup
var event_list_select = jQuery( "#selectable" );
event_list_select.append('<li class="ui-widget-content ui-selectee" data-sort="' + event_date + '">' + event_date + " - " + event_type + " in " + event_location + '</li>');

// Sort json and selector chronologically
sort_html_by_data_attr( event_list_select );

//更新标记
var事件列表选择=jQuery（“可选”）；
事件列表选择。追加（“+event\u location+””中的“+event\u content ui selectee”数据排序=“”+event\u date+”>“+event\u date+”-“+event\u type+”）；
//按时间顺序对json和选择器进行排序
按数据属性对html进行排序（事件列表选择）；

无法执行此操作，因此我重新格式化了代码，以删除所有子项，并在AJAX响应中重建事件列表，并在将它们输入DOM之前对它们进行排序

---

由于没有一个事件具有唯一id，因此我可以使用服务器中数组中事件的索引作为唯一id，并将其添加为数据索引=“属性，因此效果更好。这对于在不进行对象比较的情况下删除特定元素非常有用。

无法实现这一点，因此我重新格式化了代码，以删除所有子项，并在AJAX响应中重建事件列表，并在将它们输入DOM之前对其进行排序

---

由于没有一个事件具有唯一id，因此我可以使用服务器中数组中事件的索引作为唯一id，并将其添加为数据索引=“属性，因此效果更好。这对于在不进行对象比较的情况下删除特定元素非常有用。

在html输出中，哪个

是刚刚创建的新选项？很抱歉，索引[0]处的选项是新选项。现在还不清楚：2012年3月22日确实是<2012年5月7日。所以我们看不到“它们在排序上不混合”。我遗漏了什么？我已将原始排序顺序添加到原始帖子中。在您的html输出中，

是刚刚创建的新选项吗？很抱歉，索引[0]处的是新选项。现在还不清楚：2012年3月22日确实是<2012年5月7日。所以我们看不到“它们在排序上不混合”。我遗漏了什么？我已将原始排序顺序添加到原始帖子中。