jQuery | 20대인 사람의 배경을 빨간색으로 변경

 

지원자들의 나이가 20대라면

배경색을 빨간색으로 변경해보자 

 

 

 

 

 

$("tbody tr").each(function(index) {
  // 각 <tr> 태그 안의 <dd> 태그에서 나이 정보 추출
  var age = parseInt($(this).find("dd").text().match(/\d+/)[0]);
  
  // 나이가 20대인 경우 배경색을 빨간색으로 변경
  if (age >= 20 && age < 30) {
    $(this).css("background-color", "red");
  }
});

 

 

 

• '$()' 함수 : jQuery 에서 가장 기본적인 선택자로 <tbody> 태그의 자식인 <tr> 태그를 선택
• each() 메서드 : 선택한 요소들에 대해 반복문을 실행한다. <tr> 태그들을 하나씩 돌리면서 각각의 특성을 분석
• $(this) : 현재 처리중인 <tr> 태그를 가리킨다.
• find() 메서드 : 현재 처리 중인 <tr> 태그 안에서 특정한 하위 태그를 찾아낸다. <dd> 를 찾고있음
• text() 메서드 : 선택한 태그의 텍스트 값을 반환한다. 
• match() 메서드 : 정규 표현식을 이용하여 선택한 태그의 텍스트 중에서 원하는 패턴에 해당하는 문자열을 추출
• parseInt() 함수 : 추출한 문자열을 정수형으로 변환

 

 

match() 함수

인자로 전달된 정규 표현식을 사용하여 문자열에서 원하는 패턴을 찾아내고, 
찾아낸 문자열을 배열로 반환한다. 

반환된 배열의 첫 번재 요소는 찾아낸 첫 번째 패턴에 해당하는 문자열이다. 

'/\d+/'라는 정규표현식은 0부터 9까지의 숫자만 찾아낸다. 

 

 

parseInt() 함수

match() 함수에서 선택한 요소에서 숫자에 해당하는 문자열을 모두 찾아내어 배열로 반환하고,
반환된 배열의 첫번째 요소를 가져온다. 

그 다음 parseInt() 함수를 사용하여 반환된 문자열을 정수형으로 변환하여
'age'에는 추출한 나이 정보가 정수형으로 저장된다.