If you are here, I am sure you already know about jQuery’s parent() method and parents() method.  What I ended up doing to find out which one was faster was to create a simple benchmark test using only FireFox. This result sufficed for me but it may differ with each browser engine.

Test Scenario: HTML page consisting of nested div’s. Thirty in total. I set an id and class at parent number 2, 5, 15, and 30.  Then I used jQuery’s parent(), parents(‘#id’), and parents(‘.class’) to find out which one was the speediest.

I created a click function which I hit 10 times for each test and captured the execution time and how many underlying method calls were made for each group of ten clicks. Those are displayed as the “calls”. The times are display as “time” but are in milliseconds. So if it says 5.23, it is actually 5.23 milliseconds. The number of nodes traversed up is marked as “nodes”.

Functions: here is what the functions I used looked like

function findParent(obj){         
        $val = obj.parent().parent().parent().parent().parent().attr('class');
        $('#output').val($val);
    }
 
    function findParents(obj){
        $val = obj.parents('.toppest').attr('class');
        $('#output').val($val);
    }
 
    function findParents2(obj){
        $val = obj.parents('#topClass2').attr('class');
        $('#output').val($val);
    }
 
    $(function(){               
        $('#child').click(function(){
            findParent($(this));                           
        });
        $('#child2').click(function(){
            findParents($(this));                           
        });    
        $('#child3').click(function(){
            findParents2($(this));                           
        });
    });

Notice on the find parent method how many times .parents() is added. Can you imagine doing that for thirty nodes? ya….  that’s why I added the little value to a box when I clicked it to make sure I was grabbing the right one for test purposes. It really had nothing to do with the benchmark but since it was consistent across each one it does not screw with the test.

Averaged Results:

I made this table look pretty with tablestyler.com

Findings:

The results of the test are that using parent() even though not as clean looking in the code is actually faster for smaller traversing. But as you get farther up the DOM tree away from your child element parent() slows down.

Using parents() is pretty consistent all the way across the board with only a slight increase in time to complete the call whether your nested forty in or only one down. Plus keeps you from writing parent() ten or twenty times over.

My Suggestions:

I would use parent() for anything under 5 or 6 away from the child and use parents() every where else. That is of course if you know what element you’re look for exactly. Then in that case you may need to use the parents() method.

P.S. I hope your HTML never has an element that is nested 30 down. If so, you are probably using .NET

clone() allows you to make exact copy of that dom element without actually grabbing the one the you are cloning.  If you didn’t want to move a div and just wanted a copy, you would clone it.

Bind? Attaching an event handler to a specific DOM element.

If you make an Element using jQuery, like so:

// Creating a div element with jQuery
var myDiv = $("<div>", text: "CLICKEE!", { click: function(){ alert('YO!'); } });
// put it on the page
myDiv.appendTo('body');

You would see the text CLICKEE on the page, and if you clicked it you would get an alert saying YO!.
Then want to make a couple copies like this:

// clone original
var myDivClone = myDiv.clone();
// put it on the page
myDivClone.appendTo('body');

You would see again another CLICKEE on the page, but if you clicked it, nothing would happen. Why? When using the jQuery clone it does not clone the events, unless you pass a true into the parameter like so:

// clone original
 var myDivClone = myDiv.clone(true);
 // put it on the page
 myDivClone.appendTo('body');

Now you see the CLICKEE and the alert.