jquery - jQuery 错误：对象没有方法“高度”，this.height()

Question

我有一个带有 id#list的按钮，单击某个按钮时，我想将所有列表元素的大小增加50px.

为什么以下代码不起作用：

function Test(){
   $("#list li").each(function(){
       var h = this.height() + 50;
       this.height(h);
   });
}

此功能在按钮单击时激活，单击时出现以下错误：

Uncaught TypeError: Object #<HTMLLIElement> has no method 'height' index.html:32
(anonymous function) index.html:32
b.extend.each jquery-1.9.1.min.js:152
b.fn.b.each jquery-1.9.1.min.js:45
Test index.html:31
onclick index.html:44

Answer 1

this是一个 DOM 元素。你想要一个 jQuery 对象。

尝试$(this).height()：

function Test(){
    $("#list li").each(function(){
        var h = $(this).height() + 50;
        $(this).height(h);
    });
}

Answer 2

你可以这样做。无需循环：

function Test() {
    $("#list li").height(function (index, OldHeight) {
        return OldHeight + 50;
    });
}

.height()可以在这里找到文档：http: //api.jquery.com/height/#height-functionindex--height

Answer 3

function Test() {
    $("#list li").css('height', '+=50');
}

Is the shortest answer I can think of, which could be extended to the following to make the function reusable for different elements and heights

function Test(el, height) {
    $(el).css('height', '+=' + height);
}
// usage
Test("#list li", 50);