Использование jQuery для динамической вставки в список по алфавиту

У меня есть два упорядоченных списка рядом друг с другом.

Когда я беру node из одного списка, я хочу вставить его в алфавитном порядке в другой список. Уловка состоит в том, что я хочу извлечь только один элемент и поместить его обратно в другой список, не обновляя весь список.

Странно то, что когда я вставляю в список справа, он отлично работает, но когда я вставляю обратно в список слева, порядок никогда не выходит правильно.

Я также пробовал читать все в массив и сортировать его там, только если метод children() не возвращает вещи в том порядке, в котором они отображаются, но я все равно получаю те же результаты.

Вот мой jQuery:

function moveNode(node, to_list, order_by){

    rightful_index = 1;
    $(to_list)
        .children()
        .each(function(){
            var ordering_field = (order_by == "A") ? "ingredient_display" : "local_counter";

            var compA = $(node).attr(ordering_field).toUpperCase();
            var compB = $(this).attr(ordering_field).toUpperCase();
            var C = ((compA > compB) ? 1 : 0);
            if( C == 1 ){
                rightful_index++;
            }
        });

    if(rightful_index > $(to_list).children().length){
        $(node).fadeOut("fast", function(){
            $(to_list).append($(node));
            $(node).fadeIn("fast");
        }); 
    }else{
        $(node).fadeOut("fast", function(){
            $(to_list + " li:nth-child(" + rightful_index + ")").before($(node));
            $(node).fadeIn("fast");
        });
    }

}

Вот что выглядит мой html:

<ol>
<li ingredient_display="Enriched Pasta" ingredient_id="101635" local_counter="1">
     <span class="rank">1</span>
     <span class="rounded-corners">
          <span class="plus_sign">&nbsp;&nbsp;+&nbsp;&nbsp;</span>
          <div class="ingredient">Enriched Pasta</div> 
          <span class="minus_sign">&nbsp;&nbsp;-&nbsp;&nbsp;</span>
     </span>
</li>
</ol>

Ответ 1

Я решил создать jsFiddle с рабочим кодом для решения этой проблемы. Я также включаю код здесь, просто в случае, если jsFiddle появится в отдаленном будущем:

<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">Eggs</li>
    <li class="ingredient">Millet</li>
    <li class="ingredient">Oranges</li>
    <li class="ingredient">Olives</li>
</ol>

и jQuery:

$(".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");
    });
});

Я сократил ваш HTML вниз ради краткости, поэтому вы захотите изменить свой код, чтобы он соответствовал вашим. Кроме того, если вы собираетесь использовать пользовательские атрибуты (которые не являются допустимыми HTML и официально не поддерживаются каким-либо браузером... хотя это тоже ничего не повредит... возможно), я рекомендую префикс их "data-", чтобы соответствовать спецификации HTML5 Custom Data Attribute. Таким образом, "componentent_id" станет "data-componentient_id". Хотя это еще не поддерживается в любом текущем браузере, поскольку HTML5 не был доработан, он безопаснее и надежнее, чем просто определяет ваши собственные атрибуты. И как только HTML5 будет завершен, ваши атрибуты будут полностью поддерживаться.

Изменить. Как отметил Джон в комментариях, это не сработает, если вам нужно поддерживать символы UTF-8. В этом случае вам нужно использовать String.prototype.localeCompare() (убедитесь, что вы проверяете, поддерживает ли браузер его в соответствии с документацией). Таким образом, код будет выглядеть примерно так:

$(".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().localeCompare($(element).text()) > 0) {
                $(element).insertBefore($(this)).fadeIn("fast");
                added = true;
                return false;
            }
        });
        if(!added) $(element).appendTo($(targetList)).fadeIn("fast");
    });
});

Вот обновленный скрипт, реализующий localeCompare.

Ответ 2

Я бы получил .text() каждого элемента firs, затем поместил его в массив, отсортировал массив, а затем переместил каждый элемент, где индексы SORTED соответствуют UNSORTED.

и я слишком ленив, чтобы написать код для этого и протестировать его прямо сейчас:), а просто мысль о моем способе приближения к нему.