对jQuery中的“this”关键字感到困惑

Question

我正试图找出以下三种使用方式的原因这关键字不起作用

以下是HTML：

<ul><li><a id=“i1”href=“#”>项目1</a></li><li><a id=“i2”href=“#”>项目2</a></li><li><a id=“i3”href=“#”>项目3</a></li></ul>

下面是jQuery：

//输出href id列表并将其附加到ul元素$（'ul li a'）.each（function（）{$（“<li>”+this.id+“</li>”）.appendTo（“ul”）//此功能有效//$（this.id）.appendTo（'ul'）//这不起作用//（this.id）.appendTo（'ul'）//这不起作用//$（this）.attr（'id'）.appendTo（'ul'）//这不起作用});

这里还有jsFiddle公司

有人能解释一下为什么注释掉的3个代码片段都不起作用吗？

Answer 1

$（this.id）.appendTo（'ul'）//这不起作用

这不起作用，因为jQuery希望您在$()构造。通过提供字符串选择器i1号机组什么都配不上附加到不知道应该处理哪个对象。

（this.id）.appendTo（'ul'）//这不起作用

这不起作用，因为身份证件没有附加到方法-注意您没有使用$在这里调用jQuery。

$（this）.attr（'id'）.appendTo（'ul'）//这不起作用

这不起作用，因为附加到将附加锂对象，而不是返回的字符串属性（'id'）

这个问题本身似乎源于你似乎有点困惑附加到（）-基本上，它附加元素，而不是字符串值。读一读美国石油学会了解更多信息。

Answer 2

$（this.id）.appendTo（'ul'）与相同$（“i1”）.appendTo（'ul'）。查找标记名为“i1”的所有元素，未找到任何元素，因此此操作不起任何作用。

（this.id）.appendTo（“ul”）与相同“i1”.appendTo（“ul”），字符串中不存在此类方法

第三个注释掉的代码段与第二个调用方法完全相同.appendTo（附加到）在一根绳子上。

Answer 3

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

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

$（“ul li a”）.each（函数（）{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.id）.appendTo（'ul'）//这将起作用

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

---

//（this.id）.appendTo（'ul'）//这不起作用

（this.id）它不是jQuery对象，所以.appendTo（附加到）未定义。

---

//$（this）.attr（'id'）.appendTo（'ul'）//这不起作用

$（this）.attr（'id'）不是jQuery对象，因此.appendTo（附加到）未定义。

Answer 5

• $（this.id）尝试将ID（字符串）值用作jQuery选择器。这不是你想要的。
• （this.id）与相同此id-父母们就在这里集合。它们不是函数调用。在这两种情况下，都没有.appendTo（附加到）字符串对象上的函数，这是此id是。
• 与上一个要点中的问题几乎相同$（this）.attr（'id'）。该表达式的计算结果为字符串，该字符串没有.appendTo（附加到）功能。

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

Answer 6

//$（this）.attr（'id'）.appendTo（'ul'）//这不起作用

不起作用是因为.attr（）返回一个值，而不是实际项。使用.find（）相反！

//（this.id）.appendTo（'ul'）//这不起作用

不起作用，因为此id不是有效的jquery项。

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

$（'#'+this.id）.appendTo（'ul'）

Answer 7

就个人而言，我觉得如果您在本例中完全避免使用“this”，那么您的代码会更干净：

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

$ul=$（“#someULid”）；$（'ul li a'）.each（函数（索引，linkElement）{$linkElement=$（linkElement）；$（'<li>'+$linkElement.attr（'id'）+'</li>'）.appendTo（$ul）；});