Question

我正在使用node.js，jade，socket.io和jquery。我成功创建了聊天应用程序，并在桌面上显示了带有绿色圆点和离线用户的在线用户。颜色取决于条件所以我使用Jquery来应用颜色。现在，我需要在顶部显示所有在线用户。我的想法是按行颜色对行进行排序，以便绿色显示在顶部。
这是我的代码。

          table
                  tr
                    td 
                      button(type="submit" class="user2" style="width:70px;text-align:left;color:blue",class="btn btn-link") All  
                    td
                      label(style="width:10px; color:#04CA3A" class="glyphicon glyphicon-one-fine-full-dot")
                br
                each item in content.logincount    
                  - for(var i =0; i< item; i++) 
                      table#table
                        tr
                          td      
                            button(type="submit" class="user1" id="in"+i style="width:70px;text-align:left" class="btn btn-link")
                            br 
                          td
                            label(style="width:10px" , id="i"+i class="glyphicon glyphicon-one-fine-full-dot" class="sort")

脚本代码：

           `   jQuery(function($){      
               socket.on('usernames',function(data2){
               var html='';
               var data1=[];


            socket.on('userdetails',function(data,id){  

            for(var i=0;i<data.length;i++){

            if($.inArray(data[i],id) ==-1){

               $('#in'+i).val(data[i]);
               $('#in'+i).text(data[i]);
               $('#i'+i).css('color','#D62904');
            } 
            else{
               $('#in'+i).val(data[i]);
               $('#in'+i).text(data[i]); 

               $('#i'+i).css('color','#04CA3A');
            }
            }
            });
            });`

输出： Click to see the result.

Answer 1

您可以使用当前循环，并在设置颜色后立即将连接的用户行移动到表格顶部...

socket.on('userdetails',function(data,id) {

    for (var i=0; i<data.length; i++) {

        $('#in'+i).val(data[i]).text(data[i]);

        if ($.inArray(data[i],id) == -1) { // Offline user.
            $('#i'+i).css('color','#D62904');
        } 
        else { // Online user.
            $('#i'+i).css('color','#04CA3A')
                     .closest('tr').prependTo($('#i'+i).closest('table'));
        }
    }
});

注意：

如果id是一个javascript数组（看起来像这样），javascript本机函数.indexOf()比jQuery $.inArray()快，所以你可以使用... < / p>
```
if (id.indexOf(data[i]) == -1) { // Offline user.
```

如果您将id放入用户表，则可以直接选择（再次更快）...

HTML

 <table id="userstable"...

JQUERY

var $userstable = $('table#userstable');
$('#i'+i).css('color','#04CA3A')
         .closest('tr').prependTo($userstable);

所以，把所有东西放在一起......

socket.on('userdetails',function(data,id) {

    var $userstable = $('table#userstable');

    for (var i=0,l=data.length; i<l; i++) {

        $('#in'+i).val(data[i]).text(data[i]);

        if (id.indexOf(data[i]) == -1) { // Offline user.
            $('#i'+i).css('color','#D62904');
        } 
        else { // Online user.
            $('#i'+i).css('color','#04CA3A')
                     .closest('tr').prependTo($userstable);
        }
    }
});

我希望它有所帮助

如何基于使用jquery应用颜色的颜色对表行进行排序

1 个答案: