jQuery - 显示后按类对项目列表进行排序

Question

我正在创建一个脚本，用于生成有关患者症状的报告。下面的列表是报告列表，它是在患者回答所有问题后最终生成的。我编写了一些代码，根据患者的回答将一个类添加到下面的列表中。可能的答案是“一点也不”、“一点点”、“很多”。 如果患者选择“根本没有”选项，则从该列表中删除项目。

如果患者为某个问题选择“一点点”，则下面列表中的相应项目将获得一个名为“moderate_risk”的类。如果他选择“很多”，那么一个项目将获得一个名为“high_risk”的类。

我想在应用类之后对这个列表进行排序，并首先放置“high_risk”项目，然后是“moderate_risk”项目。

如何使用 jQuery 做到这一点？

<ul class="summarylist" id="printableArea">
        <li>Difficultly in completing daily activities such as showering, toileting, dressing, and household 
        tasks, preparing meals</li>
        <li>Bothering symptoms such as breathlessness, coughing, pain, not sleeping, poor appetite, 
        constipation, fatigue, depression or anxiety</li>
        <li>More frequent hospitalisations</li>
        <li>Needing more information about their lung disease </li>
        <li>Needing more support for themselves and/or their carer </li>                    

</ul>

Answer 1

我建议您执行I've demonstrated for you on jsFiddle here 之类的操作。 基本上，您可以使用 JavaScript Array 对象附带的 sort 函数，并提供您自己的比较函数，按顺序遍历这些 CSS 类，检查被比较的项目之一是否具有高优先级。 （当出现平局时，您可以调用另一个比较函数来添加另一个排序标准）。 jQuery 通过将您想要的 DOM 元素以数组的形式提供给您，从而为您提供了便利。对该数组进行排序后，您只需更新 DOM 以匹配。见Trent Richardson's Sort DOM Elements with jQuery article。

jQuery(document).ready(function ($) {
    var priorityClassNames = ["high_risk", "moderate_risk", "low_risk"];
    var $list = $("ul#printableArea");

    // Simple comparison function that sorts by text content of the elements
    var sortByContents = function (a, b) {
        var aText = $(a).text();
        var bText = $(b).text();
        if (aText < bText)
            return -1;
        else if (aText > bText)
            return 1;
        else
            return 0;
    };

    // Comparison function that first sorts by priority class
    // then uses sortByContents function to break ties
    var sortByClassThenByContents = function (a, b) {
        var $a = $(a);
        var $b = $(b);
        var comparisonResult = 0;
        $.each(priorityClassNames, function() {
            var className = this;
            if ($a.hasClass(className) || $b.hasClass(className)) {
                // a comes first since it has class but b doesn't
                if ($a.hasClass(className) && !($b.hasClass(className)))
                    comparisonResult = -1; 
                // b comes first since it has class but a doesn't
                else if (!$a.hasClass(className) && ($b.hasClass(className)))
                    comparisonResult = 1; 
                // Both have same class -- sory by next criterion
                else {
                    comparisonResult = sortByContents(a, b);
                }
                return false; // break out of $.each
            }
        });
        console.log(comparisonResult, $a, $b);
        return comparisonResult;
    };

    // Randomly assign high/moderate/low classes for demonstration
    $("button#add-classes").on("click", function () {
        $list.children("li")
        .each(function () {
            var $item = $(this);
            // Remove any old priority classes
            $item.removeClass(priorityClassNames.join(" "));
            // Randomly pick a priority class
            var r = Math.floor(Math.random() * priorityClassNames.length);
            $item.addClass(priorityClassNames[r]);
        });
    });

    // Sort by high/moderate/low
    $("button#sort").on("click", function () {
        console.log("About to sort");
        $list.children("li")
        // Sort jQuery object with <li> elements
        .sort(sortByClassThenByContents)
        // Take them out of the DOM
        .detach()
        // Put them back (in order)
        .appendTo($list);
    });
});

Answer 2

这对我有用。

<script type="text/javascript">
$(function() {
    sortByClass();
});

function sortByClass() {
    var lis = [];
    $('li').each(function(i, li) {
        var $li = $(li);
        lis.push([$li, $li.attr('class')]);
    });

    lis.sort(function(a, b) {
        return a[1] > b[1];
    });

    $('li').remove();
    $.each(lis, function(i, li) {
        $('ul').append(li[0]);
    });
}
</script>

<ul class="summarylist" id="printableArea">
    <li class="moderate_risk">Difficultly in completing daily activities such as showering, toileting, dressing, and household 
    tasks, preparing meals</li>
    <li class="high_risk">Bothering symptoms such as breathlessness, coughing, pain, not sleeping, poor appetite, 
    constipation, fatigue, depression or anxiety</li>
    <li class="moderate_risk">More frequent hospitalisations</li>
    <li class="moderate_risk">Needing more information about their lung disease </li>
    <li class="high_risk">Needing more support for themselves and/or their carer </li>                    
</ul>