JavaScript - 插入和排序元素

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

列表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，更新012具体的div，或者通过设置elem.style.display = 'none';

我如何排序现有条目，并解决其中一个条目应被插入（在特定点插入）

来源

2016-04-30 Andriuxa

如果你想要做在客户端进行排序，然后订购Flexbox的属性可以帮助你。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Sachin

我已经flexfox为了属性设置为用户的钱数来解决这个问题了，并设置弯曲方向：列反向;,这样的元素与更高阶的那张名单的顶部。的代码

实施例：

<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 
}

来源

2016-05-07 12:28:30 Andriuxa

假设列表始终排序删除格。要插入新用户，请找到比要插入的用户金额更少的现有用户，然后使用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

来源

2016-04-30 03:54:04 gabesoft

当用户获得更多钱后，情况如何呢？如前所述，该列表正在更新一次，我可以移动现有的分区？（删除并重新创建也许？） – Andriuxa

是的，我会从列表中删除该用户，并重新将其添加到正确的位置 – gabesoft

若要将其删除，只需通过id获取'var element = document.getElementById（“uid” ）; element.parentNode.removeChild（element）;''' – gabesoft

更多信息你可以使用一个面向对象的设计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);

来源

2016-04-30 04:25:55 user2429266

JavaScript - 插入和排序元素

回答

相关问题