按分数排序列表并保持分页

Question

我有三个内部包含列表项的无序列表，每个包含从 1 到 10 的分数。我有分页，所以我在页面中有三个相同的 ul 项。

我需要一个按钮，当单击该按钮时，按降序排列列表项（从 10 到 1）。

html 是：

<ul class="pagination">
    <li class="first active">1</li>
    <li class="second">2</li>
    <li class="third">3</li>
</ul>
<ul class="sort">
    <li class="sortEm">sort by score</li>
</ul>
<div class="block" style="display:block">
    <ul class="reviews_list">
        <li class="one_review">score:
            <div class="score">10</div>
        </li>
        <li class="one_review">score:
            <div class="score">7</div>
        </li>
        <li class="one_review">score:
            <div class="score">9</div>
        </li>
        <li class="one_review">score:
            <div class="score">2</div>
        </li>
        <li class="one_review">score:
            <div class="score">2</div>
        </li>
    </ul>
</div>
<div class="block">
    <ul class="reviews_list">
        <li class="one_review">score:
            <div class="score">1</div>
        </li>
        <li class="one_review">score:
            <div class="score">2</div>
        </li>
        <li class="one_review">score:
            <div class="score">3</div>
        </li>
        <li class="one_review">score:
            <div class="score">7</div>
        </li>
        <li class="one_review">score:
            <div class="score">9</div>
        </li>
    </ul>
</div>
<div class="block">
    <ul class="reviews_list">
        <li class="one_review">score:
            <div class="score">10</div>
        </li>
        <li class="one_review">score:
            <div class="score">2</div>
        </li>
        <li class="one_review">score:
            <div class="score">2</div>
        </li>
        <li class="one_review">score:
            <div class="score">1</div>
        </li>
        <li class="one_review">score:
            <div class="score">5</div>
        </li>
    </ul>
</div>

js 是

$(".pagination li").click(function () {
    $(this).toggleClass("active").siblings().removeClass("active");
    $(".block").hide();
    $(".block").eq($(this).index()).show()
});


$(".sortEm").click(function () {




    function sortEm(a, b) {
        return parseInt($(".score", a).text()) < parseInt($(".score", b).text()) ? 1 : -1;
    }

    $("li.one_review").sort(sortEm).prependTo($(".reviews_list"));


});

问题是使用这个功能，当我点击按钮时，我失去了分页。这是一个小提琴：http://jsfiddle.net/3ed03xy9/2/

如何编写 javascript 以便将 li 项目从一个块移动到另一个块，保持分页并将它们从 10 显示到 1？我不是 js 专家，所以我不知道该怎么做。我现在已经走了这么远..有人可以帮忙吗？非常感谢:)

Answer 1

您可以将插入排序列表的代码更改为

//store sorted list in variable so we can iterate over it and divide it
//this list combine all '.one_review' (li)s in the 3 reviews_list (ul)s
var sortedList = $("li.one_review").sort(sortEm);

// i iteration variable to let us know where we are in sortedList iteration
// we will increase it every iteration throgh sortedList elements
var i = 0;

// j iteration variable to point to Nth of ul.reviews_list (we have 3 ul.reviews_list)
// we will increase it when i=0, i=5 and i=10 
var j = -1;

// the number of items per page (here the sortedList length is 15 and we wanna dived it to 3 pages )
// 15/3 = 5 then round it
var itemsPerPage = Math.round(sortedList.length / 3);

// iterate over each item in sortedList array 
// https://api.jquery.com/each/ 
sortedList.each(function(){

    //if reminder of Nth of element / itemsPerPage equal zero that mean
    //we need to move to next ul.reviews_list empty it.
    if( i % itemsPerPage == 0 ){
        //move to next ul.reviews_list
        // we will enter here 3 times:
        // in first iteration when i=0 then 0%5 = 0 then j will be 0
        // in 6th iteration when i=5 then 5%5 = 0 then j will be 1
        // in 11th iteration when i=10 then 10%5 = 0 then j will be 2
        ++j;

        // empty current ul.reviews_list
        // see : https://api.jquery.com/eq-selector/
        // see : http://api.jquery.com/html/
        $('.reviews_list:eq('+j+')').html("");
    }

    // append current li.one_review(this) to current ul.reviews_list (:eq(j))
    $('.reviews_list:eq('+j+')').append(this);

    ++i;
});

http://jsfiddle.net/3ed03xy9/5/