javascript - 动态交换 "ul li"

Question

我有我的 ul : li 列表，其范围名为徽章，其中包含未读消息的总数。所以我想将所有 li 项目的编号最高的放在列表顶部，编号最低或没有的放在最后。我尝试了很多解决方案，但仍然无法得到它。另一点是计数实时更新，因此列表也应该实时洗牌。这是我到目前为止尝试过的代码。

我的 HTML 代码

<li>
  <span class="badge" style="display:none" id="61_T">0</span>
</li>
<li>
  <span class="badge" style="display:none" id="62_T">5</span>
</li>
<li>
  <span class="badge" style="display:none" id="63_T">10</span>
</li>
<li>
  <span class="badge" style="display:none" id="64_T">0</span>
</li>

这是我的 JS 代码

var prev_index = 0;
var curr_index = 0;
var curr_val = 0;
var prev_val = 0;
var lists = $('#items li');

var msg_count = [];
$('#items li').each(function(){
 var current_index = $(this).index();
 var count =  $(this).find('.badge').text();
 msg_count.push([current_index,count]);
});

updateli();

function  updateli(){
  $.each(msg_count,function(key,value){
      var str = value.join('-');
      var sep = str.split('-');

      curr_index = sep[0];
      curr_val  = parseInt(sep[1]);
      if(curr_val > prev_val){
        $("#items    li:eq("+curr_index+")").siblings().eq(curr_index).after(lists.siblings(':eq('+prev_index+')'));
      }
       prev_index = curr_index;
       prev_val = curr_val;
    });
   }

我在这里所做的是创建一个带有 li 索引和未读计数的数组。之后循环数组并使用 jQuery 函数交换元素，但似乎没有任何效果。任何帮助将非常感激。提前致谢。

Answer 1

这在不使用 JQuery 的情况下对列表进行排序

function sortItems(containerSelector, itemSelector, countSelector, asc) {
  let container = document.querySelector(containerSelector);
  let items = [].slice.call(container.querySelectorAll(itemSelector));
  items.sort(function(currItem, nextItem) {
    var currCountElement = currItem.querySelector(countSelector);
    var nextCountElement = nextItem.querySelector(countSelector);
    if(!currCountElement) return 1;
    if(!nextCountElement) return -1;
    var currCount = parseInt(currCountElement.textContent || -1);
    var nextCount = parseInt(nextCountElement.textContent || -1);
    var order = currCount - nextCount;
    return asc?-order:order;
  });
  
  items.forEach(function(item) { container.appendChild(item)});
}



// demo code
[].slice.call(document.querySelectorAll('.sortButton')).forEach(function(button) {
  button.addEventListener('click', function(e) { sortItems('.items', 'li', '.badge', this.classList.contains('-desc')) });
});

<ul class="items">
  <li>
  2
   <span class="badge" style="display:none" id="61_T">2</span>
  </li>
  <li>
  5
    <span class="badge" style="display:none" id="62_T">5</span>
  </li>
  <li>
  10
    <span class="badge" style="display:none" id="63_T">10</span>
  </li>
  <li>
  1
    <span class="badge" style="display:none" id="63_T">1</span>
  </li>
  <li>
  0
    <span class="badge" style="display:none" id="64_T">0</span>
  </li>
  <li>
    none
    <span class="badge" style="display:none" id="64_T"></span>
  </li>
  <li>
    no badge
    
  </li>
</ul>

<button class="sortButton">asc</button>
<button class="sortButton -desc">desc</button>

编辑:使其成为一种方法