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

는 각 콜백 인덱스 및 해당 요소를 전달되며 이는 domElement로 설정한다. 따라서 this.css('background-color', '#ffff00')을 $(this).css('background-color', '#ffff00');

으로 변경하십시오.

Answer 2

색상을 변경하는 것은 단추를 나타냅니다. 이 위치로 이동하면 this.value를 반환 할 수 있습니다. 뿐만 아니라)

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

그러나 각 (없이이 작업을 할 수 있습니다 :

Answer 3

다음은 각 기능은 약간 다르게 작동

$("#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"지적 했으므로 여전히 키워드를 사용할 수 있지만 줄 바꿈을해야합니다. JQuery와 객체에 소자 다음으로 당 docs

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