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

你需要解释老李和新李的意思。另外，请显示变量数据的内容。

假设老李是指所有现有的李，你可以使用

删除它们

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

如果你只想删除一些lis，也许他们有一些课程，或者某些价值或其他财产。结帐http://api.jquery.com/category/selectors/以了解如何选择所需的元素，然后在其上调用remove。

如果要为删除设置动画，请使用此处提到的效果之一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>');
});

Checkout http://jsfiddle.net/5kxbr/2/ ...玩它，或者更好地分叉并修改它以适合您的问题......

使用jQuery：在ul中删除，添加和动画li

1 个答案: