JavaScript - Элементы вставки и сортировки

Question

Я постараюсь быть настолько конкретным, насколько могу. На странице есть элемент div, который должен содержать список пользователей. Пользователи обладают следующими свойствами: UserID, UserName, lvl, money. Строка, содержащая указанные данные, содержит случайное форматирование HTML. Каждый пользователь добавляется к div с использованием JavaScript с использованием оператора += по адресу innerHTML. Список обновляется через некоторое время, а новые пользователи добавляются снизу. У каждого пользователя есть свой дополнительный div с id="uid_" + id, после того как пользователь больше не онлайн, он удаляется, применяя style.display = "none" на конкретном div. То, что я пытаюсь сделать, - это как-то сортировать пользователей, чтобы самый богатый пользователь был на вершине списка. Это означает, что пользователи должны быть вставлены в более верхнее положение или перемещены вверх, когда список обновляется.

список HTML может выглядеть так:

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

JavaScript, который добавляет пользователей примерно выглядит следующим образом:

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

функция Update ищет DIV в качестве элемента существование и при необходимости добавляет div в список innerHTML, обновления innerHTML конкретных DIV или удаляет DIV, установив elem.style.display = 'none';

Как я могу сортировать существующие записи и решить, где следующая запись должна быть вставлена ​​(и вставить его в определенной точке)

Answer 1

Я решил этот вопрос, установив свойство flexfox порядка к числу денег пользователя имеет, и установить Flex-направление: колонок-обратного ;, этого способ элементы с более высоким порядком, идет в верхней части списка.

Пример кода:

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

Answer 2

Предполагая, что список всегда отсортирован. Чтобы вставить нового пользователя, найдите существующего пользователя с наименьшей суммой денег, превышающей введенную пользователем, затем используйте 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 3

Вы могли бы использовать объектно-ориентированное проектирование 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);