jQuery-根据ID的值在两个现有元素之间创建新的同级元素


jQuery - Create new sibling element between two existing elements based on the value of the IDs

我正在创建一个动态事件日历列表,并试图找到一种方法,根据它们的Id在两个元素之间添加一个新元素。现有元素具有一个ID,该ID被格式化为用作事件的日期。

ID是在年月日之前创建的

示例

<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日创建了另一个事件,那么它应该放在关于李的两个事件之间。

它必须是死的,因为如果列表中有很多事件,每天只有一个事件,它就必须抓住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

试试这个: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);
        }
    });
});​

我不太确定你的问题,但就我而言,你想根据Id在两个元素之间添加一个新元素。。。那么你试过jQuery包装了吗?在这里找到它http://api.jquery.com/wrap/

希望这能帮助。。。