Javascript 如何更新追加div数的计数

我正在建立一个socket聊天程序，每当有人加入聊天室时，显示用户数量的徽章就会增加。 下面的代码是将新用户名添加到用户列表中的函数。新名称被添加为id为=“elementInPeople”的div。我的问题是，即使有多个用户进入聊天室，该徽章也只显示1。对如何解决此问题有何建议

socket.on("update-people", function(people){
            $("#people").empty();
            $.each(people, function(clientid, name) {
                $people.append('<div id="elementInPeople">' + name + '</div>');
                var np = $("#elementInPeople").length;
                $("#numberOfPeopleOnline").text(np);
            });
    });

var np=$（“#elementInPeople”）.length；

这是您的问题。对于数组中的每个元素，您必须添加一些通用类名。例如：

$people.append('<div id="elementInPeople" class="countable_people">' + name + '</div>');

试试这个

socket.on（“更新人员”，功能（人员）{
$（“.people”）.empty（）；
$.each（人员、功能（客户端ID、名称）{
$people.append（“”+name+“”）；
});
var np=$（“.elementInPeople”）.length；
$（“#numberOfPeopleOnline”）.text（np）；
})；

无需在dom中搜索数据中已有的数量

似乎

people

是一个对象，因此

object.keys（people）.length

可以为您提供计数

socket.on("update-people", function(people){
        $(".people").empty();
        $.each(people, function(clientid, name) {
            $people.append('<div class="elementInPeople">' + name + '</div>');
        });
        var np = Object.keys(people).length;
        $("#numberOfPeopleOnline").text(np);
});

socket.on（“更新人员”，功能（人员）{
$（“.people”）.empty（）；
$.each（人员、功能（客户端ID、名称）{
$people.append（“”+name+“”）；
});
var np=Object.keys（people）.length；
$（“#numberOfPeopleOnline”）.text（np）；
});

每个人的徽章上都写着1吗？只有一个div带有

id

attribute“elementInPeople“应该在结果页面中才是有效的htmlYou不能在页面中重复ID…根据定义，它们是唯一的。改为计算类。。。循环完成后再做，…不需要像预期的那样计算每个迭加的div数？您是否尝试过使用类而不是id？数人而不是除名怎么样？np看起来像什么？是的。我正在使用websocket。当我在不同的窗口中输入聊天程序时，计数不会更新。但是，名称会在列表中更新，不需要每次迭代都计算它们……这是很多不必要的dom搜索，我没有想到！你是对的。现在编辑消息。谢谢！完美地工作

var np = $(".countable_people").length;
$("#numberOfPeopleOnline").text(np);

socket.on("update-people", function(people){
        $(".people").empty();
        $.each(people, function(clientid, name) {
            $people.append('<div class="elementInPeople">' + name + '</div>');
        });
        var np = Object.keys(people).length;
        $("#numberOfPeopleOnline").text(np);
});