Javascript 基于MD数组中的值更改容器外观的问题

我目前正在更改某些容器的工作方式，其基础是数组中是否满足某个值，以及是否使用套接字和一点Jquery实时将某个值定位在容器中

对于单个网页，它可以正常工作，但是当我打开同一网页的两个实例时，如果我刷新页面，当数组中没有重复值时，它就会开始复制容器

在下图中，我单击了左侧实例上的refresh，但在右侧出现了另一个容器，而此时应该只有两个。每次我刷新左侧页面时，都会不断添加一个值，但当我刷新右侧页面时，它只有两个值，左侧有三个值

阵列的外观：

[ [ 'User_488', null ],
  [ 'User_487', 'disable' ],
  [ 'User_477', 'disable' ],
  [ 'User_490', 'disable' ],
  [ '1000', 'enable', 'offline' ],
  [ '1001', 'enable', 'online' ],
  [ '1002', 'disable' ],
  [ '1004', 'disable' ]]

基于上述数组更改容器外观的代码，似乎是问题的根源：

socket.on("eventsCalls", function (calldata) {
    for (var i = 0; i < calldata.length; i++) {
        if (calldata[i][0] && calldata[i][2] === "Ringing") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("answer noanswer default").addClass("ring").attr('data-content', calldata[i][3]);
        } else if (calldata[i][0] && calldata[i][2] === "Hangup") {
            $("div[class*='tile']:not(.DND):contains('" + calldata[i][0] + "')").removeClass("answer noanswer default").addClass("hangup").attr('data-content', calldata[i][3]);
            setTimeout(function () {
                $("div[class*='tile']").removeClass("hangup");
            }, 3000);
        } else if (calldata[i][0] && calldata[i][2] === "ANSWER") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("ring noanswer default").addClass("answer").attr('data-content', calldata[i][3]);
        } else if (calldata[i][0] && calldata[i][2] === "NOANSWER") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("ring default").addClass("noanswer").attr('data-content', calldata[i][3]);
        } else if (calldata[i][0] && calldata[i][4] === "DND") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("hangup default").addClass("DND");
        } else if (calldata[i][0] && calldata[i][4] === "") {
            $("div[class*='tile']:contains('" + calldata[i][0] + "')").removeClass("DND default");
        }
    }
});

socket.on("eventsRegister", function (regisdata) {
    for (var i = 0; i < regisdata.length; i++) {
        if (regisdata[i][2] === "online") {
            $("div[class*='tile']:not(.answer .noanswer .ring .hangup):contains('" + regisdata[i][0] + "')").removeClass("ring default").css("background-color", "#78ff4d").html("<h6><img  src='../images/online.png'> <b>" + regisdata[i][0] + "</b></h6><p><span></span></p>");
        } else if (regisdata[i][2] === "offline") {
            $("div[class*='tile']:not(.answer .noanswer .ring .hangup):contains('" + regisdata[i][0] + "')").removeClass("ring").addClass("default").css("background-color", "white").html("<h6><img  src='../images/offline.png'> <b>" + regisdata[i][0] + "</b></h6><p><span></span></p>");
        }
    }
});

任何人都知道为什么会发生这种情况，我现在很困惑

---

编辑：

发现了问题，问题很小，我正在使用默认类删除所有内容，该类在每次状态更改时都会被删除，因此现在它将使用类平铺删除所有内容，并防止任何重复的容器

socket.on("presenceusers", function (userPresence) {
    $('.tile').remove();\\ <------
    for (var i = 0; i < userPresence.length; i++) {
        if (userPresence[i][1] === "enable") {
            $presence.append('<div class="col-md-2 md tile default"><h6><img src="../images/offline.png"><b>' + userPresence[i][0] + '</b></h6></div>');
        }
    }
});

socket.on（“presenceusers”，函数（userPresence）{
$（'.tile'）.remove（）；\\发现了问题，问题很小，我使用默认类删除了所有内容，该类在每次状态更改时都会删除，因此现在它将使用类tile删除所有内容，并防止任何重复的容器

socket.on("presenceusers", function (userPresence) {
    $('.tile').remove();\\ <------
    for (var i = 0; i < userPresence.length; i++) {
        if (userPresence[i][1] === "enable") {
            $presence.append('<div class="col-md-2 md tile default"><h6><img src="../images/offline.png"><b>' + userPresence[i][0] + '</b></h6></div>');
        }
    }
});

socket.on（“presenceusers”，函数（userPresence）{
$（'.tile'）.remove（）\\