我有两个相邻的有序列表。
当我从一个列表中取出一个节点时,我想将其按字母顺序插入到另一个列表中。问题是我只想取出一个元素并将其放回另一个列表中,而不刷新整个列表。
奇怪的是,当我插入右侧列表时,它工作正常,但是当我插入左侧列表时,顺序永远不会正确。
我还尝试将所有内容读入数组并对其进行排序,以防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"> + </span>
<div class="ingredient">Enriched Pasta</div>
<span class="minus_sign"> - </span>
</span>
</li>
</ol>
最佳答案
我创建了一个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,并且不受任何浏览器的正式支持......尽管它也不会伤害任何东西......可能),我建议在它们前面加上“data-” ”以符合 HTML5 Custom Data Attribute规范。因此“ingredient_id”将变为“data-ingredient_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");
});
});
关于jquery - 使用 jQuery 按字母顺序动态插入列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2886739/