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 - 插入和排序元素

回答

相關問題