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

发布于 2024-12-11 07:14:28 字数 1233 浏览 0 评论 0原文

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

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

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

原文

I have this function for adding a new item to the beginning of the list and removing the last one:

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

How can I make it work the other way around ? I want to add the item to the end and remove the first and also make it slide the other way around, like right to left.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南汐寒笙箫 2024-12-18 07:14:28

看一下 jQuery.append （以及用于列表开头的 jQuery.prepend）

回复收藏 0 原文

薆情海 2024-12-18 07:14:28

你的代码看起来真的很复杂。稍微简化一下可能会给你这样的结果：

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

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

jQuery 插件语法非常容易理解
append() 到底
部var 声明在顶部

祝你好运！

Your code seems really complicated. Simplifying it a little bit might give you something like this:

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

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