Using jQuery to Dynamically Insert Into List Alphabetically
- by Dex
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.
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.
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");
});
}
}
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"> + </span>
<div class="ingredient">Enriched Pasta</div>
<span class="minus_sign"> - </span>
</span>
</li>
</ol>
