Используя jQuery для динамичной Вставки В Список В алфавитном порядке
У меня есть два заказанных списка друг рядом с другом.
Когда я вынимаю узел из одного списка, я хочу вставить его в алфавитном порядке в другой список. Выгода - то, что я хочу взять просто один элемент и поместить его назад в другой список, не обновляя весь список.
Странная вещь состоит в том, что, когда я вставляю в список справа, он хорошо работает, но когда я вставляю назад в список слева, порядок никогда не выходит право.
Я также попытался читать все в массив и отсортировать его там на всякий случай дети (), метод не возвращает вещи в порядке, они отображены, но я все еще получаю те же результаты.
Вот мой 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>
2 ответа
Я создал jsFiddle с рабочим кодом для решения этой проблемы. Я также включаю сюда код на тот случай, если 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 . Таким образом, "ингридиент_ид" станет "данным-ингридиентом_ид". Хотя это еще не поддерживается ни одним текущим браузером, так как 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");
});
});
Я бы сначала получил .text () каждого элемента, затем поместил бы его в массив, отсортировал бы массив, а затем переместил бы каждый элемент, где индексы SORTED совпадают с UNSORTED.
и я слишком ленив, чтобы написать код для этого и протестировать его прямо сейчас :) но я просто подумал о своем подходе к этому.