JQuery遍歷文本框並更改其顏色

Question

我試圖遍歷表中的所有空文本框並更改其背景色。我使用下面的jQuery代碼：

$("#btn2").click(function() { 
      var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; }); 
      emptyTextBoxes.each(function() { 
      this.css('background-color', '#ffff00'); 
//   $('#Col3Txtbx').css('background-color', '#ffff00');  
      }); 
     }); 

This似乎並沒有提及這似乎很奇怪，我的文本框中。當我取消註釋特定文本框時，它會重置背景顏色。

有人可以向我解釋'這'是指什麼？

Answer 1

作爲每docs，回調到每個將被傳遞的索引和所討論的元件，這將被設置爲一個DOMElement。因此，將this.css('background-color', '#ffff00')更改爲$(this).css('background-color', '#ffff00');

Answer 2

這是改變顏色的指的是按鈕。如果你移動這個你返回this.value它可能工作。

Answer 3

的每個功能的工作原理有點不同：

$("#btn2").click(function() { 
    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; }); 
    emptyTextBoxes.each(function(index, element) { 
    $(element).css('background-color', '#ffff00'); 
    }); 
}); 

但是你可以不用每次（這項工作），以及：

$("#btn2").click(function() { 
    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; }); 
    emptyTextBoxes.css('background-color', '#ffff00'); 
}); 

甚至更​​短的版本：

$("#btn2").click(function() { 
    $("input:text[value='']").css('background-color', '#ffff00'); 
}); 

編輯：正如「rz」指出的那樣，你仍然可以使用this關鍵字，但是你必須要包裝所述元件成jQuery對象：

$("#btn2").click(function() { 
    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; }); 
    emptyTextBoxes.each(function() { 
    $(this).css('background-color', '#ffff00'); 
    }); 
});