开发者

remove elements from the jQuery object from within a plugin

I think I have mistaken some fundamentals here, because I think this should work. I am trying to to through the child p and div elements of the matched set, and remove those which fail to meet the required wordcount from the matched set.

I have tested the wordCount plugin, and the if statement it is being used it, and all seems to be working fine, but my element is not being removed from the matched set.

(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);

Here is the wordCount plugin, just in case you wondered:

(function($){
    $.fn.extend(开发者_如何学JAVA{
        wordCount: function(){
            return $(this).html().split(" ").length;
        }
    });
})(jQuery);


I made a few changes... see fiddle for working example and code for comments.

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);
});


Have you tried $(this).remove() rather than JQ_Object.not(x);

I think .not() removes them from the selection rather than from the HTML... unless that's what you're trying to do


You're creating a new JQ_Object in the internal each, so I'm not sure if it would modify the original JQ_Object. I'm not 100% on that though. Try JQ_Object.not(this).

This assumes, however, that .each is synchronous, which I'd hope it isn't. If that's the case, you'd need to make use of jQuery's while function.

This should give you the desired result, but I'd be wary each being asynchronous.

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

EDIT:

I'm not to sure about the above code. What I'd do is use a callback. This assumes a callback is passed in to your plugin.

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜