Javascript 如何使用jQuery将新项添加到列表的末尾？

我有此功能，用于将新项目添加到列表的开头并删除最后一个项目：

function addItem(id, text){
    var el = $('#' + id);
    var w = el.width();
    el.css({
        width:   w,
        overflow: 'hidden'
    });
    var ulPaddingLeft    = parseInt(el.css('padding-left'));
    var ulPaddingRight = parseInt(el.css('padding-right'));
    el.prepend('<li>' + text + '</li>');
    var first = $('li:first', el);
    var last  = $('li:last',  el);
    var fow = first.outerWidth();
    var widthDiff = fow - last.outerWidth();
    var oldMarginLeft = first.css('margin-Left');
    first.css({
        marginLeft: 0 - fow,
        position:  'relative',
        left:       0 - ulPaddingLeft
    });
    last.css('position', 'relative');
    el.animate({ width: w + widthDiff }, 1500);
    first.animate({ left: 0 }, 250, function() {
        first.animate({ marginLeft: oldMarginLeft }, 1000, function() {
            last.animate({ left: ulPaddingRight }, 250, function() {
                last.remove();

                el.css({
                    width:   'auto',
                    overflow: 'visible'
                });
            });
        });
    });
}

函数附加项（id，文本）{
var el=$（'#'+id）；
var w=标高宽度（）；
el.css({
宽度：w，
溢出：“隐藏”
});
var ulPaddingLeft=parseInt（el.css（'padding-left'）；
var ulPaddingRight=parseInt（el.css（'padding-right'）；
el.prepend（“
”+文本+”
）；
var first=$（'li:first'，el）；
var last=$（'li:last'，el）；
var fow=first.outerWidth（）；
var widthDiff=fow-last.outerWidth（）；
var oldMarginLeft=first.css（'margin-Left'）；
first.css({
边缘左侧：0-fow，
位置：'相对'，
左：0-ulPaddingLeft
});
css（'position'，'relative'）；
制作动画（{width:w+widthDiff}，1500）；
动画（{left:0}，250，function（））{
动画（{marginLeft:oldmaginleft}，1000，function（）{
动画（{left:ulPaddingRight}，250，function（））{
最后，删除（）；
el.css({
宽度：“自动”，
溢出：“可见”
});
});
});
});
}

---

我怎样才能让它反过来工作呢？我想将项目添加到末尾，删除第一个项目，并使其以相反的方式滑动，如从右向左滑动。

查看jQuery.append（以及jQuery.prepend表示列表的开头）

查看jQuery.append（以及jQuery.prepend表示列表的开头）

您的代码看起来非常复杂。稍微简化一下可能会得到如下结果：

  $("#whateverList").addItem("awesome")  

 jQuery.fn.addItem = function(text) {
     var $li  = $("<li>").text(text)
     $(this).find("li:first").remove()
     $(this).append($li)
 }

$（“#whateverList”）.addItem（“很棒”）
jQuery.fn.addItem=函数（文本）{
变量$li=$（“
”）。文本（text）
$（this.find（“li:first”）.remove（）
$（此）.append（$li）
}

jQuery插件语法非常容易理解

append（）以转到底部

顶部的var声明

---

祝你好运

您的代码似乎非常复杂。稍微简化一下可能会得到如下结果：

  $("#whateverList").addItem("awesome")  

 jQuery.fn.addItem = function(text) {
     var $li  = $("<li>").text(text)
     $(this).find("li:first").remove()
     $(this).append($li)
 }

$（“#whateverList”）.addItem（“很棒”）
jQuery.fn.addItem=函数（文本）{
变量$li=$（“
”）。文本（text）
$（this.find（“li:first”）.remove（）
$（此）.append（$li）
}

jQuery插件语法非常容易理解

append（）以转到底部

顶部的var声明

---

祝你好运

大多数“复杂”的代码都是为了方便动画制作。如果不逐项介绍它所做的一切，我就不能说它是否过于复杂。大多数“复杂”的代码都是为了方便动画制作。如果不仔细检查它所做的一切，我就不能说它是否过于复杂。是的，用append代替prepend。并反转动画。可能有一种简单的方法可以让动画向右或向左，但这需要一个相当慷慨的开发人员为您提供。是的，附加而不是前置。并反转动画。可能有一种简单的方法可以让动画向右或向左移动，但这需要一个相当慷慨的开发人员为您提供。