3

我试图弄清楚为什么以下 3 种使用 this关键字的方法不起作用

这是HTML：

<ul>
    <li><a id="i1" href="#">Item 1</a></li>
    <li><a id="i2" href="#">Item 2</a></li>
    <li><a id="i3" href="#">Item 3</a></li>
</ul>

这是jQuery：

// Output a list of href ids and append them to the ul element
$('ul li a').each(function() {
    $('<li>' + this.id + '</li>').appendTo('ul') // this works
    // $(this.id).appendTo('ul') // this doesn't work
    // (this.id).appendTo('ul') // this doesn't work
    // $(this).attr('id').appendTo('ul') // this doesn't work
});

这里也是jsFiddle

有人可以解释为什么被注释掉的 3 个代码片段都不起作用吗？

4

7 回答 7

1

$(this.id).appendTo('ul')与 相同$("i1").appendTo('ul')。查找标签名称为“i1”的所有元素，没有找到，所以什么都不做。

(this.id).appendTo("ul")一样"i1".appendTo("ul")，字符串中不存在这样的方法

第三个注释掉的片段与第二个完全相同 - 调用.appendTo字符串的方法。

于 2012-10-24T12:22:46.707 回答
1 
$(this.id).appendTo('ul') // this doesn't work

这不起作用，因为 jQuery 期望您在$()构造中提供元素、元素数组或字符串选择器。通过提供一个不会匹配任何内容的字符串选择器i1，appendTo它将不知道它应该处理哪个对象。

(this.id).appendTo('ul') // this doesn't work

这不起作用，因为返回的值id没有appendTo方法 - 请注意，您没有使用$here 来调用 jQuery。

$(this).attr('id').appendTo('ul') // this doesn't work

这不起作用，因为appendTo将附加li对象，而不是返回的字符串attr('id')

问题本身似乎源于您似乎有点困惑的事实appendTo()- 基本上它附加元素，而不是字符串值。阅读API以获取更多信息。

于 2012-10-24T12:22:52.317 回答
0

this指的是您在每次each迭代中使用的 jQuery 对象的基础 DOM 元素。

在您的示例中，以下代码：

$("ul li a").each(function() {
    console.log(this.href);
});

将以与以下相同的方式工作：

console.log(document.getElementById("i1").href);
console.log(document.getElementById("i2").href);
console.log(document.getElementById("i3").href);
于 2012-10-24T12:21:16.193 回答
0 
// $(this.id).appendTo('ul') // this doesn't work
$('#'+this.id).appendTo('ul') // this will work

要使用 ID 选择器，您需要添加#前缀。

// (this.id).appendTo('ul') // this doesn't work

(this.id) 它不是 jQuery 对象，所以.appendTo是未定义的。

// $(this).attr('id').appendTo('ul') // this doesn't work

$(this).attr('id')不是 jQuery 对象，所以.appendTo是未定义的。

于 2012-10-24T12:21:34.597 回答
0
  • $(this.id)尝试使用 ID（字符串）值作为 jQuery 选择器。那不是你想要的。
  • (this.id)是一样的this.id- 括号只是在这里分组。它们不是函数调用。在这两种情况下，字符串对象都没有.appendTo函数，就是这样this.id。
  • 与上一个要点中的问题几乎相同$(this).attr('id')。该表达式的计算结果是一个没有.appendTo函数的字符串。

在所有情况下，您都应该养成使用调试器的习惯，并查看 JavaScript 错误控制台，因为 #2 和 #3 会打印出描述问题的非常明显的错误。

于 2012-10-24T12:21:55.940 回答
0 
// $(this).attr('id').appendTo('ul') // this doesn't work

不起作用，因为.attr()返回一个值，而不是实际项目。改用.find()！

// (this.id).appendTo('ul') // this doesn't work

不起作用，因为this.id它不是有效的 jquery 项。

所以如果你想使用一个id，你需要使用

$('#'+this.id).appendTo('ul')
于 2012-10-24T12:22:14.347 回答
0

就个人而言，我觉得如果您在这种情况下完全避免使用“this”，您的代码会更简洁：

http://jsfiddle.net/DZPnP/3/

$ul = $('#someULid');

$('ul li a').each(function( index, linkElement) {
    $linkElement = $(linkElement);
    $('<li>' + $linkElement.attr('id') + '</li>').appendTo( $ul );
});
于 2012-10-24T12:33:11.990 回答