Question

我是jQuery的新手，我正在查看涵盖DOM更改的教程。

以下是该教程的一个示例。

HTML部分：

<h1>My Awesome Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

脚本

(function() {
  $('p').eq(0).after(function() {
    return $(this).prev();
  });
})();

我不知道为什么我需要在这里使用函数，如果它只是返回一个值？为什么以下声明不起作用？

$('p').eq(0).after( $(this).prev());

Answer 1

以下内容：

function() {
    return $(this).prev();

“this”指的是它找到的元素，在你的尝试中它不会。

如果您想缩短它，可以尝试

$('p').eq(0).after($(this).prev());

Answer 2

所有关于范围和this

的价值

在第一个例子中，函数创建一个新的范围，就像所有函数一样，其中this是当前迭代的元素，因为jQuery在内部迭代元素集合并设置this的值相应

$('p').eq(0).after(function() { // new scope, where "this" is the element
    return $(this).prev();
});

在第二个代码中，没有特殊的范围集，因此范围是代码所在的范围，很可能是窗口范围，或者如果它位于$(document).ready范围内，this会是文件

$('p').eq(0).after( $(this).prev()); // there is no scope here

您可以阅读有关functions and function scope on MDN

的更多信息

Answer 3

这是因为第二个版本中的this可能会返回Window对象。在各个点尝试console.log(this)以了解它的含义是如何变化的。这样的事情也会产生你期望的结果：

var b = $('p').eq(0).prev();
$('p').eq(0).after(b);

为什么我需要使用函数作为参数，不能只使用它返回的值

3 个答案: