Md. Alim Ul Karim Md. Alim Ul Karim - 10 days ago 7
Javascript Question

jQuery Performance test between filter vs. find from already loaded data

I already know that 'jquery.find' search nested elements from the current selector. However 'jQuery.filter' only goes through already existed data. From my guess filter would be faster but I have seen few performance test that find does better. Don't which way should be better, can anyone please help me out on this?

Let's say I have this plugin:
Which way of search through elements would be faster.

$.plugIn = {

$appForm: $("form.app-editing-page"), // means both editing and posting
$appFormEdit: $("form.app-edit"),
$appFormPost: $("form.app-post"),
$allInputs: $("form.app-post input"),
checkPerform: function(){
var visibleInputs = $.plugIn.$appForm.find("input:visible"); // way 1 with find
var visibleInputs2 = $.plugIn.$allInputs.filter(":visible"); // way 2 with filter from cached
}

}


In my mind filter should be faster because it looks from only the cached items. But can anyone help out on this , understanding the performance.

Another thing, is it the right way to declare plugins and variables;

Answer

 $.plugIn = {

   $appForm: [], //$("form.app-editing-page"), // means both editing and posting
   $appFormEdit: [], //$("form.app-edit"),
   $appFormPost: [], //$("form.app-post"),
   $allInputs: [], //$("form.app-post input"),
   checkPerform: function() {
     $.plugIn.$appForm = $(".app-editing-page"); // faster than "form.class"
     $.plugIn.$appForm = $(".app-post");
     $.plugIn.$allInputs = $.plugIn.$appForm.find("input"); // a lot more faster than complex queries.

     var visibleInputs = $.plugIn.$allInputs.filter(":visible"); // faster way
   }

 }