Jquery 从jCarousel插件中删除项

我有一个关于jCarousel插件的问题（来自sorgalla）。如何以正确的方式从中删除项目

你可以看到我走了多远。 试着删除一些项目，然后向右滚动，你最终会看到一个“emtpy滚动”，这就是我试图摆脱的

我尝试过使用remove（）；jQuery函数，而不是将css更改为显示：无；但这就产生了一个奇怪的空白区域，物品原来就在这里。 如果您查看第400行的jquery.jcarousel.js，您将看到一个remove函数，但我不确定如何使用它

---

非常感谢您的帮助。谢谢

您的示例是有意义的，除非您超出了插件的范围，jCarousel不知道如何更新自己。从文档来看，您提到的remove（）方法似乎可以工作。然而，在我的试验中，我从未能让jCarousel对象真正“做正确的事情”，并更新它的按钮、滚动等等

正因为如此，我在jCarousel类上编写了一个额外的方法来实现这一点。调用removeAndAnimate（1）删除旋转木马中的第一个项目并重建所有内容，以便启用/禁用下一个/上一个按钮

同样值得注意的是，jCarousel提供的remove（）函数可以防止您删除当前正在显示的项目，这正是我们想要做的（例如，允许用户通过单击图像从旋转木马中删除图像）

removeAndAnimate的实施（i）：

---

那应该行

我找到了白盒问题的根源。JCarousel method format（）不替换类名，只添加新的类名。我重新编写了这个函数，它对我来说很好：

format: function(e, i) {
        // remove all class names matches 'jcarousel-item' at the start
        $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, '');
        // add new class names  
        var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({
            'float': 'left',
            'list-style': 'none'
        });
        $e.attr('jcarouselindex', i);
        return $e;
}

---

我把你的两个答案结合起来，因为没有一个对我有用

我在init自定义函数中添加了它

carousel.removeAndAnimate = function(i) {
            var counter = 1;    
            var itemsHTML = new Array();
            var e = this.get(i);
            children = e.parent().find("li");
            $(e).remove()
            $.each(children,function(){
                if(counter != i) {
                    itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
                }
                counter++;
            });
            this.size(this.options.size -1);
            this.reset();
            counter = 1;
            carousel = this;
            $.each(itemsHTML, function(k, v){
                if(v != null) {
                    carousel.add(counter, v[0].innerHTML);
                    counter++;
                }
            });
            this.reload();
        }

它工作得很好

---

您可以添加更多的改进，如滚动回刚刚删除的项目位置。

我的另一个解决方案是向加载的内容添加一个类，并删除DOM中没有此类的所有项目。一旦被

carousel.reset（）

删除，这些元素就会系统地丢失添加的类

$.jcarousel.fn.extend({
    removeAndAnimate: function(index) {

        var itemsHTML = new Array();
        var counter = 0;

        // Me guardo los que quedan
        for(i = 0; i < this.size(); i++)
        {
            if(i != (index - 1))
                itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html();
        }

        // Configuro uno menos y borro todo
        this.size(this.options.size -1);
        this.reset();


        // Vuelvo a cargarlos
        counter = 0;
        for(i = 0; i < itemsHTML.length; i++)
        {
            this.add(counter++, itemsHTML[i]);
        }

        this.reload();
    }
});

然后，您将能够通过以下方式移除白色框：

$("li:not(.the_class)").remove();

将其添加到

carousel.Add（）函数之后

它工作得很好，您甚至不需要向旋转木马添加任何功能

这是一个“易于使用”的解决方案，单击“上一步/下一步”按钮可能会显示一个白色框。要删除它，请在回调
按钮nextcallback
/
按钮revcallback
上应用相同的解决方案，这很好。最后我选择了一个不同的插件。
$.jcarousel.fn.extend({
    removeAndAnimate: function(index) {

        var itemsHTML = new Array();
        var counter = 0;

        // Me guardo los que quedan
        for(i = 0; i < this.size(); i++)
        {
            if(i != (index - 1))
                itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html();
        }

        // Configuro uno menos y borro todo
        this.size(this.options.size -1);
        this.reset();


        // Vuelvo a cargarlos
        counter = 0;
        for(i = 0; i < itemsHTML.length; i++)
        {
            this.add(counter++, itemsHTML[i]);
        }

        this.reload();
    }
});

var carousel = jQuery('#mycarousel').data('jcarousel');
carousel.removeAndAnimate(1);

$("li:not(.the_class)").remove();