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

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

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

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

我也尝试将所有内容读入一个数组并在那里进行排序，以防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的样子：

 
 
 1    +   
Enriched Pasta
   -    
  

Answer 1

我创建了一个带有工作代码的jsFiddle来解决这个问题。 我在这里也包含了代码，以防jsFiddle在遥远的未来大肆宣传：

 
 
Apples
 
Carrots
 
Clams
 
Oysters
 
Wheat
 
 
 
Barley
 
Eggs
 
Millet
 
Oranges
 
Olives
 
​ 

和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自定义数据属性规范。 所以“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"); }); }); 

这是一个更新的Fiddle实现localeCompare 。

Answer 2

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

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