Обновить список div

Question

У меня есть список div, например:

<div class="categories" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'">
    <div class="categories1">
        Andy
    </div>

    <div class="categories2">
        Link to Andy
    </div>
</div>

<div class="categories" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'">
    <div class="categories1">
        Mark
    </div>

    <div class="categories2">
        Link to Mark
    </div>
</div>

...

<div class="categories" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'">
    <div class="categories1">
        Yuri
    </div>

    <div class="categories2">
        Link to Yuri
    </div>
</div>

Упорядочено по имени внутри categories1.

Через AJAX / jQuery я добавляю на сервер новую категорию, и после этой операции я бы хотел обновить список на стороне клиента.

Итак, я подумал:

1. Выберите все категории из базы данных после вставки, создайте весь HTML и обновите старую с новой; более быстрое решение, как кодирование, но если список такой длинный, накладные расходы велики;

2. Загрузить с сервера только созданный элемент, просмотреть DOM Trought JQuery, проверить, куда поместить элемент (проверка алфавитного порядка) и добавить его;

Ни один из них не звучит хорошо для меня, поэтому я попрошу вас некоторые предложения / советы / идеи.

Спасибо

Answer 1

Сделайте AJAX-вызов, чтобы получить новые элементы. Добавьте его к вашему содержанию div. Затем отсортируйте все div по имени, используя ->

//get a raw array of dom nodes
var items = $('.categories1').get();

//empty out the container
$('#container').empty();

//use Array's prototype sort() method
items.sort(function(x,y) {
  return $(x).text() > $(y).text();
});

//iterate through their sorted order, appending their parent back to the container
$(items).each(function() {
    $('#container').append($(this).parent());
});

Вот скрипка, чтобы увидеть это в действии - http://jsfiddle.net/rz3Ww/

Answer 2

После прочтения вашего вопроса на ум приходят две вещи:

1. Вы говорите о списке, но используете DIV. Это не конец света, но использование неупорядоченного списка (<ul>) было бы более семантически целесообразным.
2. Поскольку вы запускаете jQuery, эта проблема требует использования плагина jQuery Templates . Вы пытаетесь выполнить привязку данных на стороне клиента, и это именно то, что вам помогут шаблоны jQuery.

Answer 3

Я был бы склонен согласиться с вашим вторым предложением - jQuery может очень быстро получить все элементы с классом category1, и оттуда просто разобрать текст в массив.Тогда все, что вам нужно сделать, это выяснить, какой элемент находится перед вашим новым элементом, найти его в DOM и добавить свой после него.