Question

示例：

$("#good").append("third command <br>");
$("#good").append("secont command <br>");
$("#good").append("first command <br>");

如果ı追加第四个命令ı想要删除第一个命令并添加新命令：

$("#good").append("fourth command <br>");
$("#good").append("third command <br>");
$("#good").append("secont command <br>");
//first append deleted

我该怎么做？

Answer 1

对于此解决方案，您必须稍微更改一下标记，但它似乎运行良好。您可以使用:lt()查找索引小于指定索引的项目。使用负数从头开始计数。因此:lt(-4)选择除最后4个元素之外的所有元素。这是一个可以根据自己的需要定制的演示：

http://jsfiddle.net/p5UW7/

<button id="theButton">Add item</button>
<div id="container"></div>

var current = 1;
$('#theButton').click(function() {
   $('#container').append('<div>item ' + current++ + '</div>');
    $('#container div:lt(-4)').remove();
});

Answer 2

这是使用我在评论中提到的数组方法的方法：

http://jsfiddle.net/p5UW7/1/

var myarray = [];
var current = 1;

$('#theButton').click(function() {
    if (myarray.length >= 3) {
        myarray.shift(); //remove the first entry
    }
    myarray.push("item " + current++); //push the new entry onto the array
    $('#container').html(myarray.join("<br>")); //set the markup using the new array
});

仅供参考，如果你想以相反的顺序展示项目，这个jsfiddle以同样的方式使用pop()和unshift()

http://jsfiddle.net/p5UW7/2/

Answer 3

首先，您应该将内容附加到html元素中，我建议使用“div”。在触发附加的事件发生时（假设它是一个按钮点击），你可以做...

$("btn").on('click',function(){
                    $("#good").append("<span>command</span>");
                    if($("#good").length>3){
                        $("#good append")[0].remove();
                    }
                });

PS：使用CSS来打破行而不是倍数<br>

Answer 4

如果您为此作业创建帮助程序插件，该怎么办：

$.fn.limitAppend = function (limit, content) {
    return this.each(function () {
        $(this).children().filter(':lt(-' + (limit - 1) + ')').remove();
        $('<div>').append(content).appendTo(this);
    });
};

并使用它代替append：

$("#good").limitAppend(3, "1st command");
$("#good").limitAppend(3, "2nd command");
$("#good").limitAppend(3, "3rd command");
$("#good").limitAppend(3, "4th command");
$("#good").limitAppend(3, "5th command");

http://jsfiddle.net/637K3/1/

Jquery附加限制

4 个答案: