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

Question

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

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

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

Я также пытался прочитать все в массив и отсортировать его там на случай, если метод 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>

Answer 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 и официально не поддерживаются ни одним браузером ... хотя это также ничего не помешает ... вероятно), я рекомендую ставить перед ними " «для соответствия спецификации HTML5 Custom Data Attribute . Таким образом, «component_id» станет «data-ингридиент_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");
    });
});

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

Answer 2

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

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