jquery - 如何在 jquery 中正确使用 $(this)？

Question

我正在尝试将文本大小调整为父框的大小，有人可以向我解释为什么这是有效的：

$('.box').css('font-size',$('.box').height());

这不起作用：

$('.box').css('font-size',$(this).height());

顺便说一句，我正在使用带有phonegap的jquery mobile。

score 7 · Accepted Answer

这是行不通的，因为您正在调用css函数$('.box')并将 $(this).height() 的值传递给它，而不是对其自身的引用。在这种情况下this，仍然是保存该行代码的函数的上下文。尝试这样的事情，以完成你想要的：

$('.box').css('font-size',function () {
   return $(this).height() + "px";
});

score 5 · Accepted Answer

正如您从jQuery 文档中看到的那样：

$('.box').css('font-size',function () {
   return $(this).height() + "px";
});

传递函数的上下文绑定到css()调用方法的对象。这就是为什么 ,this将被分配给带有 class 的 HTML 元素dom。

score 0 · Accepted Answer

例子：

HTML：

 <input type="button" class="box" id="someID" value="Click this box" />

jQuery：

$('.box').click(function() {

    var test = $(this).attr('id');
    alert('Here is the ID for the element on which you clicked: ' + test);

});

当您捕获一个事件时，该事件与页面上的一个元素相关联。在这种情况下，元素是按钮类型的输入字段，并且被捕获的事件是“点击”事件。

事件函数内部的代码click()可以将触发事件的元素称为$(this).

如果您希望引用 DOM 中的任何其他元素，则必须指定该元素。

3 回答 3