Question

当我尝试从函数返回对象并将其赋值给smalls变量时，变量smalls为空，因为它的长度返回为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>";
    }

虽然这样可行并且变量小号具有所需的长度。

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

根据我对Javascript的了解，可以将函数赋值给变量。我做错了什么？

Answer 1

您忘记在此处执行smalls

var smalls = function(){
        var table = $("#box-table-a");
        return table.find("small");
    }, smallContent;
    for(var i = 0; i<smalls.length; i++)
//                   ^smalls is a function pointer

var smalls = function(){
            var table = $("#box-table-a");
            return table.find("small");
        }(), smallContent;
//       ^execute the function
        for(var i = 0; i<smalls.length; i++)
//                       ^smalls is a nodeList

Answer 2

这是因为您必须实际执行该功能，而不仅仅是分配它。将您的函数赋值更改为自执行匿名函数，这应该可行。

var smalls = (function(){
    var table = $("#box-table-a");
    return table.find("small");
})(), smallContent;

Answer 3

正如其他人所提到的，你循环一个函数引用而不是执行smalls的结果。

然而，当您使用jQuery时，您可以编写更短/更简单的代码：

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

这有各种优点：

只需将类添加到列表中，您就不必担心空格。
wrapInner会保留DOM（包含所有侦听器等），而不是使用html字符串
parent（）遍历方法取消组合，因此具有多个table-box的元素只能获得一个类
根本不需要循环，jQuery方法将在集合中的每个项目上执行。

Answer 4

尝试

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

因为没有整个函数的调用就永远不会调用return。

BTW：

$('#box-table-a .small')
    .toggleClass('form-absolute-right',true)
    .wrap('<span class="bouble" />')
    .parent()
    .toggleClass('relative',tru);

甚至可能更好。

Javascript - 将函数赋值给变量不能按预期工作

4 个答案: