Question

我有两个彼此相邻的有序列表。

当我从一个列表中取出一个节点时，我想按字母顺序将其插入到另一个列表中。问题是，我想只取出一个元素并将其放回另一个列表而不刷新整个列表。

奇怪的是，当我插入右边的列表时，它工作正常，但当我插回到左边的列表中时，顺序永远不会出现。

我还尝试将所有内容读入数组并在那里进行排序，以防child（）方法没有按照显示的顺序返回内容，但我仍然得到相同的结果。

这是我的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 with working code来解决这个问题。我在这里也包含了代码，以防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规范。所以“ingredient_id”将成为“data-ingredient_id”。虽然目前任何浏览器都不支持这一点，因为HTML5还没有最终确定，但它比定义自己的属性更安全，更健壮。完成HTML5后，您的属性将得到完全支持。

编辑 - 正如John在评论中指出的那样，如果你需要支持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");
    });
});

Here is an updated Fiddle implementing localeCompare

Answer 2

我会得到每个元素firs的.text（），然后将它放在一个数组上，对数组进行排序，然后移动每个元素，其中SORTED的索引与UNSORTED匹配。

而且我懒得为此编写代码并立即测试它:)但只是想一想我接近它的方式。

使用jQuery以字母顺序动态插入列表

2 个答案: