0

我在 Jquery 中遇到了这个问题。当我在我的网站上这样做时，它会返回给我 window.width。我只想从内部访问元素。这是一个例子。

<div class="section " style="width:400px"></div>

$( ".section" ).html($(this).width());

或者

<div class="section "><p></p></div>

$( ".section p" ).html($(this).parent().width());

这里也是 JSFiddle jsfiddle.net/XY66w/1

4

3 回答 3

3

我将假设当您尝试编写此代码时：

<div class="section " style="width:400px"></div>

$( ".section" ).html($(this).width());

您要做的是400px在div.section. 如果这就是你想要做的，那么这就是正在发生的事情：

这个说法：

$( ".section" ).html($(this).width());

如果 Javascript 或我知道的大多数其他语言在语法上等同于：

var newHTML = $(this).width();
$( ".section" ).html(newHTML);

如您所见，这不是 jQuery 问题，而是 JavaSciprt / 任何编程语言问题。您告诉浏览器将一个值传递给该.html()方法，因此它必须首先在您调用该方法的函数范围内计算该值。在这种情况下，您是从windowor 全局范围（或​​其他一些未定义的范围）调用该方法，因此您永远不会得到您期望的结果。

简单的修复是这样的：

var section = $('.section');
section.html(section.width());

另一方面，有一些 jQuery 方法可以接受函数，在这种情况下，您似乎正在考虑这些方法。例如，如果您使用each接受函数的方法，情况会略有不同：

$('.section').each(function(index, element){
    $(this).html($(this).width());
});

在这种情况下，您将传入一个函数，然后 jQuery 将在您的选择器匹配的每个元素的范围内调用该函数。

最大的区别是要区分何时传入一个值和何时传入稍后将评估的函数。

于 2013-09-15T04:09:56.960 回答
1

你可以这样做，我认为：

$(".section").each(function() {
  $(this).html($(this).width());
});

JavaScript 与许多常用语言一样，不是一种“惰性”语言。评估像您这样的表达式语句，以便在实际调用任何内容之前确定所有函数参数。通过使用 jQuery .each()API，您可以对所选集合的每个元素进行操作。

于 2013-09-15T03:50:41.720 回答
1

jQuery 仅this在调用函数时绑定，例如事件处理程序、回调函数、提供给类似 的函数$.each等。

在您的示例中，您只是为 jQuery 方法提供了一个参数，它不在 jQuery 调用的函数中。所以this只包含浏览器的上下文，即window顶层代码。这不是选择器匹配的元素.section。

于 2013-09-15T04:04:45.483 回答