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