Question

我有这个功能，可以在列表的开头添加一个新项目并删除最后一个项目：

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'
                });
            });
        });
    });
}

如何让它以相反的方式工作？我想将项目添加到最后并删除第一个项目，并使其向右滑动，如从右到左。

Answer 1

看一下jQuery.append（和jQuery.prepend作为列表的开头）

Answer 2

你的代码看起来很复杂。稍微简化它可能会给你这样的东西：

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

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

jQuery插件语法非常容易理解
追加（）到底部
var声明

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

2 个答案: