javascript - 如何更新附加 div 的数量计数

Question

我正在构建一个套接字聊天程序，每当有人加入聊天室时，显示用户数量的徽章就会增加。 下面的代码是将新用户名添加到用户列表中的函数。新名称添加为带有 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);
            });
    });

服务器端:

socket.on("connection", function(client) {
client.on("join", function(name){
    console.log("Someone joined the chat");
    people[client.id] = name;
    client.emit("updateToSelf", "You have connected to the server. Join or create room to chat");
    socket.sockets.emit("update-people", people);
    client.broadcast.emit('updateToOthers', name + " has joined the server.");
});

Answer 1

无需在 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);
});