Question

When I try to return object from the function and assign it to smalls variable, the variable smalls is empty as it’s length is returned as 0.

var smalls = function(){
        var table = $("#box-table-a");
        return table.find("small");
    }, smallContent;
    for(var i = 0; i<smalls.length; i++){
        smallContent = smalls[i].innerHTML;
        smalls[i].parentElement.className += "relative";
        smalls[i].className += "form-absolute-right";
        smalls[i].innerHTML = "<span class='bubble'>" + smallContent + "<span>";
    }

While this works and variable smalls has the desired length.

    var table = $("#box-table-a");
    var smalls = table.find("small");       //fetch the tr's with <small> tag
    var smallContent;
    for(var i = 0; i<smalls.length; i++){
        smallContent = smalls[i].innerHTML;
        smalls[i].parentElement.className += "relative";
        smalls[i].className += "form-absolute-right";
        smalls[i].innerHTML = "<span class='bubble'>" + smallContent + "<span>";
    }

From the knowledge I have on Javascript, one can assign function to a variable. What am I doing wrong?

Answer 1

As others have mentioned, you loop over a function reference and not the result from executing smalls.

Yet, as you use jQuery, you can write shorter/simpler code:

var smalls = $("#box-table-a").find("small"); // this var really contains the elements
smalls.addClass("form-absolute-right").wrapInner("<span class='bubble' />");
smalls.parent().addClass("relative");

This has various advantages:

• the classes are simply added to the list and you don’t have to worry about the whitespaces.
• wrapInner does preserve the DOM (with all listeners etc) instead of messing with html strings
• the parent() traversing methods uniques the set, so elements with more than one table-box do get only one class
• you don’t need a loop at all, jQuery methods are executed on every item in the set.