使用jQuery按字母顺序动态地插入列表 [英] Using jQuery to Dynamically Insert Into List Alphabetically

问题描述

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

I have two ordered lists next to each other.

当我从一个列表中取出一个节点时，我想按字母顺序将其插入到另一个列表中.我要抓住的是，我只想取出一个元素，然后将其放回另一列表中，而不刷新整个列表.

When I take a node out of one list I want to insert it alphabetically into the other list. The catch is that I want to take just the one element out and place it back in the other list without refreshing the entire list.

奇怪的是，当我在右侧的列表中插入时，效果很好，但是当我在左侧的列表中重新插入时，顺序永远不会正确.

The strange thing is that when I insert into the list on the right, it works fine, but when I insert back into the list on the left, the order never comes out right.

我还尝试将所有内容读取到数组中并进行排序，以防child()方法未按显示顺序返回事物，但我仍然得到相同的结果.

I have also tried reading everything into an array and sorting it there just in case the children() method isn't returning things in the order they are displayed, but I still get the same results.

这是我的jQuery:

Here is my 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的样子:

Here is what my html looks like:

<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>

推荐答案

我使用工作代码创建了 jsFiddle 解决此问题.我也将代码包括在这里，以防jsFiddle在遥远的未来变得烦人:

I have created a jsFiddle with working code to solve this problem. I am including the code here as well just in case jsFiddle goes belly up in the distant future:

<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自定义数据属性规范.因此，"ingredient_id"将变为"data-ingredient_id".由于HTML5尚未完成，因此当前的任何浏览器均不支持此功能，但比定义自己的属性更安全，更可靠. HTML5完成后，您的属性将得到完全支持.

I stripped your HTML down for the sake of brevity, so you will want to modify my code to match yours. Also, if you are going to use user defined attributes (which are not valid HTML and not officially supported by any browser...though it also won't hurt anything....probably), I recommend prefixing them with "data-" to conform with the HTML5 Custom Data Attribute specification. So "ingredient_id" would become "data-ingredient_id". While this is not yet supported on any current browser as HTML5 has not been finalized, it is safer and more robust than just defining your own attributes. And once HTML5 is finalized, your attributes will be fully supported.

编辑-正如John在评论中指出的那样，如果您需要支持UTF-8字符，则此方法将无效.在这种情况下，您需要使用 String.prototype. localeCompare()(请确保根据文档检查浏览器是否支持该浏览器).这样的代码看起来像这样:

Edit - As John pointed out in the comments, this will not work if you need to support UTF-8 characters. In this case you need to use String.prototype.localeCompare() (make sure you check that the browser supports it as per the documentation). So that code would look something like this:

$(".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的更新版小提琴.

这篇关于使用jQuery按字母顺序动态地插入列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！