Question

我想添加一个像fiddle这样的元素，但是当字符串有一个UTF-8字符因为"é" is > at all basics letters时，我有一个问题需要比较我的字符串。

<ol class="ingredientList">
    <li class="ingredient">Apples</li>
    <li class="ingredient">Carrots</li>
    <li class="ingredient">Clams</li>
    <li class="ingredient">Oysters</li>
    <li class="ingredient">Wheat</li>
</ol>
<ol class="ingredientList">
    <li class="ingredient">Barley</li>
    <li class="ingredient">éggs</li>
    <li class="ingredient">Millet</li>
    <li class="ingredient">Oranges</li>
    <li class="ingredient">Olives</li>
</ol>

$(".ingredient").click(function() {
    var element = $(this);
    var added = false;
    var targetList = $(this).parent().siblings(".ingredientList")[0];
    $(this).fadeOut("fast", function() {
        $(".ingredient", targetList).each(function() {
            if ($(this).text() > $(element).text()) {
                $(element).insertBefore($(this)).fadeIn("fast");
                added = true;
                return false;
            }
        });
        if (!added) $(element).appendTo($(targetList)).fadeIn("fast");
    });
});

你有解决方法吗？

Answer 1

您可以使用localeCompare()方法对包含变音符号的文本进行排序。试试这个：

$(".ingredient").click(function() {
    var $element = $(this);
    var $targetList = $element.closest('.ingredientList').siblings().first();

    $element.fadeOut("fast", function() {
        $element.appendTo($targetList);    
        $(".ingredient", $targetList).sort(function(a, b) {
            return $(a).text().localeCompare($(b).text());
        }).appendTo($targetList);
        $element.fadeIn('fast');
    });
});

Updated fiddle

请注意，我修改了逻辑以使选择器更有效，并且还启用了排序算法。

localeCompare MDN documentation

Answer 2

为了进行比较，您可能希望替换突出显示的字符： Remove accents/diacritics in a string in JavaScript

如何比较两个包含变音字符的UTF-8字符串

2 个答案: