Javascript 动态引用JQUERY中的子元素

我正在尝试创建一个小聊天面板来练习我在JQuery中所学的东西

到目前为止，我已经成功创建了一个丑陋的面板，允许用户输入消息并将其发送到面板的左侧

但是消息显示在彼此的顶部。因此，我使用Jquery对发送的消息进行动画处理，从而将它们向上推

我有一个名为animateLeftSide的函数，它尝试向上移动创建的每个元素。但是现在它把所有的人都提升了。如何分别针对每个元素

以下是我编写的函数：

var animateLeftSide = function() {
    var numberOfMessages = $('.leftside').children().length
    var i = 0
    while (i < numberOfMessages) {
        if (i > 0) {
            $('.leftside').children(i).animate({
                    top: '-=70px'
                }, 100) //move it upwards 
        }
        i++;
    }
};

var animateLeftSide=function（）{
var numberOfMessages=$（'.leftside'）.children（）.length
变量i=0
while（i0）{
$（'.leftside'）.children（i）.动画({
顶部：'-=70px'
}，100）//将其向上移动
}
i++；
}
};

---

.

它只会使所有元素向上移动，因为每次输入时都会将所有元素向上移动（使用while循环）。只需删除while循环。但是删除它，将在插入时第一次留下空白。为此，我在JSFIDLE中修改了您的js，并发现它可以工作。试试这个

$(document).ready(function () {
    var i=false;
    $('#btn-send').click(function () {
        var toAdd = $('input[name=textbox]').val();

        if (toAdd.length == 0) {
            alert("No message Entered");
        } else {

            animateLeftSide(i);
            i=true;

            $('.leftside').append('<div class="message">' + toAdd + '</div>');
            $('input[name=textbox]').val('');
            //alert("" + $('.leftside').children().length + "");
                    }
    });

    $(document).on('click', '.message', function () {
        $(this).remove();
    });


    var animateLeftSide = function (i) {  
        if(i){
                $('.leftside').children().animate({
                    top: '-=70px'
                }, 100) //move it upwards 
        }
    };

});

$（文档）.ready（函数（）{
var i=假；
$（“#btn发送”）。单击（函数（）{
var toAdd=$（'input[name=textbox]'）。val（）；
如果（toAdd.length==0）{
警报（“未输入消息”）；
}否则{
animateLeftSide（i）；
i=正确；
$（'.leftside'）.append（''+toAdd+''）；
$（'input[name=textbox]'）.val（“”）；
//警报（“+$（'.leftside'）.children（）.length+”）；
}
});
$（文档）.on（'click'，'message'，函数（）{
$（this.remove（）；
});
var animateLeftSide=函数（i）{
如果（i）{
$（'.leftside'）.children（）.animate({
顶部：'-=70px'
}，100）//将其向上移动
}
};
});

如果您仍然不清楚，请留下评论。我可以让你清白