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

对列表进行排序

＆＃13;

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')) });
});

＆＃13;

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

＆＃13;

编辑：将其设为方法

Answer 2

尝试下面的代码please.jquery返回一个类似数组的对象，以便您可以按sort(..)方法对元素进行排序，然后替换所有li。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <span class="badge" id="61_T">0</span>
    </li>
    <li>
        <span class="badge" id="62_T">5</span>
    </li>
    <li>
        <span class="badge" id="63_T">10</span>
    </li>
    <li>
        <span class="badge" id="64_T">0</span>
    </li>
</ul>
<script>
    var badges = $('.badge').parent().sort(function (a, b) {
        return parseInt($(b).find('span').text()) - parseInt($(a).find('span').text());
    });    
   badges.closest('ul').empty().append(badges);
</script>

动态交换“ul li”

2 个答案: