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

您可以更改将排序列表插入

的代码

ResourceManager::getTexture("res/texture.png")

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

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

1 个答案: