如何更新附加div的数量答案

【问题标题】：How to update count of number of appended divs如何更新附加div的数量
【发布时间】：2017-09-10 23:12:57
【问题描述】：

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

【问题讨论】：

大家的徽章都是1吗？
只有一个具有id属性“elementInPeople”的div应该在结果页面中是有效的html
您不能在一个页面中重复 ID...根据定义它们是唯一的。改为计数类......并在循环完成后执行，......无需计算每次迭代
追加的 div 是否符合您的预期？您是否尝试过使用类而不是 id？计算人数而不是 div 怎么样？ np 长什么样子？
是的。我正在使用网络套接字。而且当我在不同的窗口进入聊天程序时，计数没有更新。但是，名称会在列表中更新

标签： javascript jquery node.js sockets

【解决方案1】：

var np = $("#elementInPeople").length; 这是你的问题。对于数组中的每个元素，您必须添加一些常见的类名。喜欢：

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

然后你可以找到这样的人数：

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

【讨论】：

【解决方案2】：

试试这个！

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

【讨论】：

不需要每次迭代都计算它们......这是很多不必要的 dom 搜索
我没想到！你说的对。现在编辑消息。

【解决方案3】：

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

【讨论】：

谢谢！完美运行