Question

我正在试图找出以下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个代码片段中没有一个有用吗？

Answer 1

$(this.id).appendTo('ul')与$("i1").appendTo('ul')相同。查找标签名称为“i1”的所有元素，找不到任何元素，因此不执行任何操作。

(this.id).appendTo("ul")与"i1".appendTo("ul")相同，字符串

中不存在此类方法

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

Answer 2

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

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

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

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

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

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

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

Answer 3

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

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

$("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);

Answer 4

// $(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未定义。

Answer 5

$(this.id)尝试将ID（字符串）值用作jQuery选择器。那不是你想要的。
(this.id)与this.id相同 - parens就在这里。它们不是函数调用。在这两种情况下，字符串对象都没有.appendTo函数，这就是this.id。
与$(this).attr('id')上一个要点中的问题几乎相同。该表达式求值为一个字符串，该字符串没有.appendTo函数。

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

Answer 6

// $(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')

Answer 7

就个人而言，如果你完全避免在这个例子中使用“this”，我觉得你的代码会更清晰：

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

$ul = $('#someULid');

$('ul li a').each(function( index, linkElement) {
    $linkElement = $(linkElement);
    $('<li>' + $linkElement.attr('id') + '</li>').appendTo( $ul );
});

在jQuery中对'this'关键字感到困惑

7 个答案: