jQuery 문제 풀이 (6번~10번)

[6번 문제] 1~3번째까지의 item의 테두리를 굵게(2px)하고 노란색으로 변경

$("tbody tr:lt(7)").css({"border":"solid yellow 2px"});

-> tbody의 tr에서 7번째 순서에 있는 곳까지 테두리를 굵게하고 노란색으로 변경

※쿼리를 적용한 홈페이지에서 3번째까지가 7번째 tr이였기에 7번으로 하였다.

 

[7번 문제] 지원 자격 항목 중 '경력'이 들어가는 행 전체를 삭제

$("div dl:eq(5)").remove();

-> 홈페이지에서 '경력'이 포함된 div의 5번째 dl을 remove시킴

 

[8번 문제] 이력서 요약 항목 중 '자격증'이 들어가는 행의 테두리를 녹색(5px)로 변경

$("div dl:eq(17)").css({"border":"solid green 5px"});

-> 홈페이지에서 '자격증'이 들어가는 div의 17번째 dl의 테두리를 녹색으로 변경

 

[9번 문제] 출생년도가 1992년생인 경우 해당 프로필 (ex: (남 | 1992년, 28세))의 배경색을 노란색으로 변경

$("tr:contains('1992년')").css("background", "yellow");

-> tr내에서 contains 태그를 활용하여 '1992년'을 포함한 tr의 배경색을 노란색으로 변경

 

[10번 문제] 지원자들 중 '신입'인 경우 해당 행의 배경을 오렌지색으로 바꾸고 콘솔창에 "신입 지원자는 총 n명입니다."를 출력

$("span.person-resume__career--junior").closest("tr").css("background", "orange");
$(document).ready(function(){
alert('신입 지원자는 총 ' + $('.person-resume__career--junior').length + ' 명입니다.');});

->첫번째 줄에서 span의 클래스 명인 person-resume__career--junior로 경로를 잡고 closest를 통해 상위 tr로 이동하여 배경색을 오렌지색으로 변경.

이후 function을 사용하여 문자열을 출력시킴

※.closest(" ")의 경우 이전 경로의 가장 가까운 상위로 이동하여 경로를 잡음. " "내에 경로를 지정할 경우 가장 가까운 지정 경로로 설정