从插件中删除jQuery对象中的元素

时间:2011-06-28 15:20:38

标签: javascript jquery jquery-plugins

我认为我在这里误解了一些基本原则,因为我认为这应该有效。我试图通过匹配集的子pdiv元素,并从匹配集中删除那些无法满足所需wordcount的元素。

我已经测试了wordCount插件,以及它正在使用它的if语句,并且一切似乎都正常,但我的元素没有从匹配的集中删除。

(function($){
    $.fn.extend({
        textBlocks: function(count){
            var JQ_Object = $(this);
            if(!count) count = 100;
            return this.each(function(){
                $(this).find("p, div").each(function(){
                    if($(this).wordCount()<count){
                        var x = $(this);
                        JQ_Object.not(x);   
                    };
                });
                return JQ_Object;
            });
        }
    });
})(jQuery);

这是wordCount插件,以防你想知道:

(function($){
    $.fn.extend({
        wordCount: function(){
            return $(this).html().split(" ").length;
        }
    });
})(jQuery);

3 个答案:

答案 0 :(得分:2)

我做了一些更改......请参阅工具示例小提琴和评论代码。

http://jsfiddle.net/8PXpt/

(function ($){
    $.fn.extend({
        wordCount: function (){
            //Don't need $(this), this already refers to the jQuery object
            //Always trim .html() and .text() when using .split()
            //May want to use .text() instead of .html() - I leave that to you
            return $.trim(this.html()).split(' ').length;
        }
    });
})(jQuery);



(function ($){
    $.fn.extend({
        textBlocks: function (count){
            var collection = this;

            //Check that a number was passed
            //"50" would break your extension
            if(typeof count !== 'number') {
                count = 100;
            }

            //Removed $('div, p') - this should be part of your call
            //See ready function below
            this.each(function (){

                if ($(this).wordCount() < count){
                    //This could be double assignment
                                    //but better safe than sorry
                    collection = collection.not(this);   
                };

            });

            //Return what is left (what passed)
            return collection ;
       }
    });
})(jQuery);


$(function() {
   //Here is where you define your selector... in your case 'div, p'
   $('div, p').textBlocks(2);
});

答案 1 :(得分:1)

您是否尝试过$(this).remove()而不是JQ_Object.not(x);

我认为.not()会将其从选择中移除而不是从HTML中删除...除非您正在尝试这样做

答案 2 :(得分:0)

你在内部创建一个新的JQ_Object,所以我不确定它是否会修改原始的JQ_Object。虽然我不是百分之百。试试JQ_Object.not(this)。

然而,这假定.each是同步的,我希望它不是。如果是这种情况,你需要在功能时使用jQuery。

这应该会给你想要的结果,但我会警惕每个人都是异步的。

return $(this).find("p, div").each(function(){
    if($(this).wordCount()<count){
       JQ_Object.not(this);
    };
});

编辑:

我不确定上面的代码。我要做的是使用回调。这假设回调传递到您的插件。

$(this).find("p, div").each(function(){
    if($(this).wordCount()<count){
       JQ_Object.not(this);
    };
}).when(function () {
    callback(JQ_Object);
});