困惑jQuery中

Question

我試圖找出爲什麼下面使用this關鍵字的3種方式不工作

這裏「這個」關鍵字是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

有人能解釋W¯¯ hy註釋掉的3個代碼片段中沒有一個工作？

Answer 1

$(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 2

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 3

// $(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 4

• $(this.id)嘗試使用ID（字符串）值作爲jQuery選擇器。這不是你想要的。
• (this.id)與this.id相同 - parens只是在這裏組。它們不是函數調用。在這兩種情況下，字符串對象上都沒有.appendTo函數，這就是this.id。
• 幾乎與前面的要點$(this).attr('id')相同的問題。該表達式評估爲一個字符串，它沒有.appendTo函數。

在所有情況下，您應該養成使用調試器並查看JavaScript錯誤控制檯的習慣，因爲＃2和＃3會打印出非常明顯的錯誤來描述問題。

Answer 5

// $(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 6

$(this.id).appendTo('ul')是一樣$("i1").appendTo('ul')。找到標籤名稱爲「i1」的所有元素，都沒有被發現，所以這沒有任何作用。

(this.id).appendTo("ul")是相同"i1".appendTo("ul")，沒有這樣的方法中存在的字符串

第三註釋片段是完全一樣的第二 - 在一個字符串調用方法.appendTo。

Answer 7

就個人而言，我覺得你的代碼將變得更乾淨，如果你避免使用「本」在這種情況下乾脆：

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

$ul = $('#someULid'); 

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