Question

我会努力尽可能具体。页面上有一个div元素，应该包含user-list。用户具有以下属性：UserID，UserName，lvl，money。包含所提及数据的行包含随机更多的HTML格式。使用div上的+=运算符，使用JavaScript将每个用户添加到innerHTML。该列表将在一段时间内刷新，并将新用户添加到底部。每个用户都有自己的额外div id="uid_" + id，一旦用户不再在线，他就会通过在特定div上应用style.display = "none"来删除。我尝试（愿意）做的是以某种方式对用户进行排序，以便最富有的用户位于列表之上。这意味着应该将用户插入更高的位置，或者在列表刷新时移动到顶部。

列表HTML可能如下所示：

<div id='list'>
    <div id='uid_1524><font...>UserName</font><...>[15]<...>6587$<...></div>
</div>

添加用户的JavaScript大致如下所示：

d.getElementById('list').innerHTML += "<div id='uid.....</div>";

更新函数将div视为元素存在，如果需要，将div添加到列表的innerHTML，更新特定div的innerHTML，或通过设置elem.style.display = 'none'; <删除div / p>

如何对现有条目进行排序并解决应插入下一个条目的位置（并在特定点插入）

Answer 1

假设列表始终排序。要插入新用户，请找到资金最少的现有用户，然后使用Element.insertAdjacentHTML()添加新用户。

例如

var previous = findPreviousUser();
previous.insertAdjacentHTML('afterend', "<div id='uid.....</div>");

或者，您可以找到第一个用户资金少于当前用户的用户，然后使用insertAdjacentHTML('beforebegin', ...)将当前用户插入其中。

在此处查看更多信息https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 2

您可以使用面向对象的设计paatern并跟踪用户和值，以便像这样对它们进行排序：

未经测试的“伪代码”。

var user_ranking = (function(){

    function user_ranking(){
        this.user_element = document.getElementById('user-container');
        this.rank_map      = {};
        this.user_map      = {};
        this.user_map_html = {};
    }
    user_ranking.prototype.add_user = function( user_details ){
        this.rank_map[user_details.rank] = user_details.uid;
        this.user_map[user_details.uid]  = user_details.rank;
        this.add_user_to_dom( user_details );
    };
    user_ranking.prototype.remove_user = function(uid){
    };
    user_ranking.prototype.add_user_to_dom = function( user_details ){

        var new_child = this.template( user_details );
        this.user_map_html[user_details.uid] = new_child;

        var rank_uid   = this.get_rank( user_details );
        var rank_child = this.user_map_html[rank_uid];

        this.user_element.insertBefore( new_child, rank_child );
        /** or after etc. **/

    };
    user_ranking.prototype.get_rank = function( user_details ){
        /** logic to get the rank you want **/
        /** loop over rank_map keys and check for the user_id of the previous / next rank **/
        return wanted_user_id;
    }
    user_ranking.prototype.template = function( user_details ){
        /** logic to get the rank you want **/
        var element = document.createElement('li');
        li.innerHtml = user_details.html;
        return li;
    }

    return new user_ranking();

})();

/** usage **/
user_ranking.add_user( user_details );

Answer 3

我已经通过将flexfox order属性设置为用户拥有的金额来解决了这个问题，并设置了flex-direction：column-reverse;这样，具有更高顺序的元素就会出现在列表的顶部。

代码示例：

<div id='UserList' style='display:-webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse;'>

</div>

创建用户

if (!d.getElementById("uid_" + id) {
    // Create a new element, UserNameText should contain entire line with Name, lvl, money, etc.
    d.getElementById("UserList").innerHTML += "<div id='uid_" + id + "' style='-webkit-order:" + UserMoney + "; order: " + UserMoney + ";'>" + UserNameText + "</div>";
}

删除用户

if (d.getElementById("uid_" + id) {
    d.getElementById("uid_" + id).style.display = "none"; // Simply hide element
}

更新用户

if (d.getElementById("uid_" + id) {
    d.getElementById("uid_" + id).innerHTML = UserNameText; // In case data needs to be updated
    d.getElementById("uid_" + id).style.display = "block"; // In case it was hidden
    d.getElementById("uid_" + id).style.order = UserMoney; // In case position needs to be updated
}

JavaScript - 插入和排序元素

3 个答案: