php - jQuery - 根据 ID 的值在两个现有元素之间创建新的兄弟元素

Question

我正在创建一个动态事件日历列表，我正在尝试找出一种方法来根据两个元素的 ID 在两个元素之间添加一个新元素。现有元素具有一个 ID，该 ID 的格式被用作事件的日期。

ID 的创建日期为 yymmdd

例子

<li id="120523">
    This would be an event for May 23rd, 2012
</li>

<li id="120525">
    This would be for May 25th, 2012
</li>

我想做的是动态创建一个新事件并将其放置在正确的位置。例如:如果用户为 2012 年 5 月 24 日创建了另一个事件，则应将其放置在两个 about li 之间。

它必须是动态的，因为如果列表中有大量事件，每天只有一个事件，它就必须获取 ID 大于它的第一个元素，以及 ID 小于它的第一个元素比它，并在它们之间创建新元素。

例子:

我正在尝试生成这样的东西:

<li id="120504">May 4, 2012<li>

然后按照 id 的正确顺序将其放入无序列表中，如下所示:

<ul>
<li id="120123">Jan 23, 2012</li>
<li id="120415">April 15, 2012</li>
<li id="120502">May 2, 2012</li>
// new element should go here
<li id="120520">May 20, 2012</li>
<li id="120816">Aug 16, 2012</li>
</ul>

使用 jQuery

Answer 1

试试这个:http://jsfiddle.net/UJdaW/

$(function(){
    $(".date").datepicker();
    $("#add").click(function(){
        var id = parseInt( $.datepicker.formatDate('ymmdd', new Date($(".date").val())));
        var el = $("<li>This would be for " + $(".date").val() + "</li>").attr("id",id)
        var lastLi = null;
        $("li").each(function(){
            var currId = parseInt($(this).attr("id"));
            lastLi = $(this);
            if (currId > id){
                el.insertBefore($(this));
                lastLi=null;
                return false;
            }
        });

        if (lastLi){
            el.insertAfter(lastLi);
        }
    });
});​