Question

I’m trying to iterate through all the empty textboxes in a table and change its background colour. I’m using the following JQuery code:

    $("#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 does not seem to refer to the textbox which seems strange to me. When I uncomment out the particular textbox, it does reset the background colour.

Can someone explain to me what ‘This’ is referring to?

Answer 1

As per the docs, the callback to each will be passed an index and the element in question and this will be set to the domElement. So, change this.css('background-color', '#ffff00') to $(this).css('background-color', '#ffff00');