使用jQuery渲染按钮时遇addClass is not a function错误求助

错误出现在这一行代码：

$(txtIdSelector)[0].addClass("scrollable");

$(txtIdSelector)返回的是jQuery对象，而[0]会取出其中的原生DOM元素——原生DOM元素并没有addClass()方法，这个方法是jQuery对象独有的，因此会触发addClass is not a function错误。

有两种简单的修复方式，还可以进一步优化代码：

方式1：使用原生DOM的classList API #

既然已经拿到了原生DOM元素，直接用你之前验证可行的原生方法：

if ($(txtIdSelector)[0].scrollHeight > $(txtIdSelector)[0].offsetHeight ) {
    $(txtIdSelector)[0].classList.add("scrollable");
}

方式2：保持jQuery对象操作 #

不要通过[0]取出原生元素，直接用jQuery对象调用方法，同时可以提前缓存对象避免重复查找：

var $txtElement = $(txtIdSelector);
if ($txtElement[0].scrollHeight > $txtElement[0].offsetHeight ) {
    $txtElement.addClass("scrollable");
}

优化建议：复用已创建的jQuery对象 #

你在函数里已经创建了btntxt这个jQuery对象，完全不需要重新通过ID选择器查找DOM，直接复用它能提升代码效率：

function renderButton(btnArea,btnClass,btnOnclick,btnIcon,btnText,btnId) {
    var btndiv = $("<div>").addClass(btnClass).attr("onclick",btnOnclick).attr("id",btnId);
    var btnimg = $("<img>").addClass("btnicon").attr("src",btnIcon).attr("id",btnId+"img");
    var btntxt = $("<div>").addClass("btntext").text(btnText).attr("id",btnId+"txt");
    btndiv.append(btnimg);
    btndiv.append(btntxt);
    $(btnArea).append(btndiv);
    // 直接复用已创建的btntxt对象，无需重复查询DOM
    if (btntxt[0].scrollHeight > btntxt[0].offsetHeight ) {
        btntxt.addClass("scrollable");
    }
}

内容的提问来源于stack exchange，提问作者Andy Joyce