Использование jQuery: удаление, добавление и анимация li в ul

Question

У меня есть коробка ajaxcheck.Если этот флажок установлен, он отправляет запрос AJAX обратно на сервер, получает данные и должен изменить текущий ul.

$('#event_filters').change(function() {
//#$('spinner').show();
   $.ajax({
      url: "/search/filters.json?search=13",
      success: function(data){
      $("#results").children('li').each(function(){
        $(this).text('blah');
      });
      alert('came here'+data);
      //how to modify current ul to remove old li's and add new ones
      },
   });
});

Я видел эту функцию на некоторых других сайтах, и я считаю, что они добавляют анимацию, а также переход от удаления старых li и добавления новых, кажется действительно плавным.

Answer 1

Вам нужно будет объяснить, что вы имеете в виду под старыми и новыми. Также, пожалуйста, покажите содержимое переменных данных.

Предполагая, что под старыми li вы подразумеваете ВСЕ существующие li, вы можете удалить их, используя

$("#ulToRemoveFrom li").remove();

Если вы хотите удалить только некоторые lis, возможно, у них есть какой-то класс, или может быть какое-то значение или какое-то другое свойство. Оформить заказ http://api.jquery.com/category/selectors/, чтобы понять, как выбрать нужные элементы, а затем вызвать удалить их.

если вы хотите оживить удаление, используйте один из эффектов, упомянутых здесь http://api.jquery.com/category/effects/

образец: (http://api.jquery.com/animate/)

$("#ulToRemoveFrom li.offendingClass").animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
    }, 5000, function () { $(this).remove();});

........

http://api.jquery.com/category/manipulation/ имеет много функций для добавления нового элемента в DOM.

предполагая, что данные являются массивом json ["text 1", "text 2", "text 3"], вы можете сделать следующее ...

var items =  JSON.parse('["text 1", "text 2", "text 3"]');

var $ul = $("#ulToRemoveFrom");
$.each(items, function(index, item) {
    $ul.append('<li>' + item + '</li>');
});

Оформление заказа http://jsfiddle.net/5kxbr/2/ ... Поиграйте с ним, или, что еще лучше, раскошелиться и измените его под свой вопрос ...