实时从数组追加到表时停止重复值

Question

我目前正在通过一个循环来提取数组中的值，并且大部分都有效，但是当我添加第二个值时，它会将新值和以前的值复制到表中。

所以当我添加一个值为 488 的行时，它工作正常：

<tr class="exe">
   <td class="sipname">1446033619.75</td>
   <td class="siptd">SIP/488-00000027</td>
   <td><button class="btn btn-default unmute" id="mute" type="submit">Unmute</button></td>
   <td><button class="btn btn-default kick" id="kick" type="submit">Kick</button></td>
</tr>

当我添加另一个值然后说 487 然后按顺序复制同一行 488、488、487：

<tbody id="sip">
   <tr class="exe">
      <td class="sipname">1446033619.75</td>
      <td class="siptd">SIP/488-00000027</td>
      <td><button class="btn btn-default unmute" id="mute" type="submit">Unmute</button></td>
      <td><button class="btn btn-default kick" id="kick" type="submit">Kick</button></td>
   </tr>
   <tr class="exe">
      <td class="sipname">1446033619.75</td>
      <td class="siptd">SIP/488-00000027</td>
      <td><button class="btn btn-default mute" id="mute" type="submit">Mute</button></td>
      <td><button class="btn btn-default kick" id="kick" type="submit">Kick</button></td>
   </tr>
   <tr class="exe">
      <td class="sipname">1446033747.78</td>
      <td class="siptd">SIP/487-00000028</td>
      <td><button class="btn btn-default mute" id="mute" type="submit">Mute</button></td>
      <td><button class="btn btn-default kick" id="kick" type="submit">Kick</button></td>
   </tr>
</tbody>

我只需要 488,487 行没有重复的表格行，当我刷新页面时它工作正常。我正在使用 socket.io (Express)、node.js 和 Jquery。

我确实找到了一个使用 jquery remove 的小解决方法，但它会影响功能我的意思是一个小错误，所以我需要不使用 jquery remove。

socket.on('sipname', function (data, datad) {
    var sipname = '';
    var sipid = '';
    $('.exe').remove();
    for (var i = 0; i < data.length; i++) {
        sipname = data[i];
        sipid = datad[i];
        if (sipname) {
            $sip.append('<tr class="exe">\
                                         <td class="sipname">' + sipid + '</td>\
                                         <td class="siptd">' + sipname + '</td>\
                                         <td><button class="btn btn-default mute" id="mute" type="submit">Mute</button></td>\
                                         <td><button class="btn btn-default kick" id="kick" type="submit">Kick</button></td>\
                                         </tr>');
        }
    }
});

任何想法或指导将不胜感激，这会阻止我完成我的第一个版本的应用程序。

Answer 1

第一个：一遍又一遍的ID必须是唯一的

第二个：你可以试试这段代码。我把 Ids 改成了 Class 所以一定要在你的 css 样式表中改变它。并在 siptd 类中使用 data-sipname

socket.on('sipname', function (data, datad) {
    var sipname = '';
    var sipid = '';
    $('.exe').remove();
    for (var i = 0; i < data.length; i++) {
        sipname = data[i];
        sipid = datad[i];
        if (sipname) {
            if($('#sip > tr > .siptd[data-sipname = "'+sipname+'"]').length < 1){
            $sip.append('<tr class="exe">\
                   <td class="sipname">' + sipid + '</td>\
                   <td class="siptd" data-sipname="'+ sipname  +'">' + sipname + '</td>\
                    <td><button class="btn btn-default mute" type="submit">Mute</button></td>\
                    <td><button class="btn btn-default kick" type="submit">Kick</button></td>\
                                         </tr>');
         }   
      }
    }
});

希望对你有帮助

Answer 2

看起来$sip 是socket.on 函数之外的“全局”值。它在第一次.on() 调用中填充值，然后在第二次.on() 调用中再次添加任何值。

修复的方法可能是以下之一：

1. 仅将新数据发送到任何.on() 函数。这样，当您追加时，您就没有任何重复项。

2. 如果每次进入.on()函数的数据都是完整的，你可以每次调用都清空$sip数组。 $sip = [] 然后每次都添加新鲜的东西。

3. 更复杂的选项是检查数组的每个元素以查看它是否存在。如果没有，添加它，否则跳过它。使用散列也可以使这更容易，将 ID 存储为键，将 HTML 字符串存储为值。然后检查是否存在很快，!!$sip[ sipname ]（对象$sip 中的属性sipname 评估为真）。