![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbAEc4%2Fbtsgexg7Fky%2Ffo0gX2E4j9YtVGfsgGNYhK%2Fimg.png)
경력을 기준으로 정렬해보자 ( 많은 순으로 ) 먼저 경력관련한 부분의 html 을 살펴보자 신입의 경우에는 "newcomer" 클래스가 더 추가된다. 이를 이용해서 구분에 쓰면 될 것 같다. 경력은 어떻게 정렬할 수 있을까? 2년 6개월의 경력자와 3년 1개월의 경력자가 있다고 하자 1년은 12개월이기 때문에 2x12 + 6 = 30 개월 3x12 + 1 = 37 개월 이렇게 구분할 수 있다. 이 사실을 이용해서 해결해보자 // HTML 코드의 모든 tr 요소를 선택 $('tr').each(function() { // 각 tr 요소에서 경력 정보를 추출 var careerSpan = $(this).find('.career'); if (careerSpan.length) { var careerText = c..
$(document).ready() 함수 문서 객체 모델(DOM) 이 로드되고 준비되었을 때 코드를 실행하는 jQuery 함수 최신 브라우저에서는 대부분의 경우 이 함수를 사용하지 않아도 동작한다. $(document).ready() 의 축약형인 $(function() {...}) 을 사용할 수 있다. 예를 들어 jQuery 관련 포스트 중 신입 지원자를 찾는 jQuery 를 예로 들어보자 2023.05.15 - [jQuery] - jQuery | 신입 배경 변경 및 개수 추출 jQuery | 신입 배경 변경 및 개수 추출 해당 페이지에서 '신입' 인 경우 배경색을 오렌지로 바꾸고 콘솔창에 신입 지원자의 갯수를 출력해보자 신입의 경우 다음과 같이 클래스네임이 지정되어있으므로 이를 이용하면 될 것 같다 1..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbnpe7j%2Fbtsf4cjZ2Cr%2Fcxsw4l2jU5Q86Acn96MdHk%2Fimg.png)
기업 연봉을 살펴보는 페이지 부럽다 ㅎㅎ 여기서 채용중인 기업의 행을 노란색으로 변경하고 콘솔에 채용중인 공고의 개수를 출력해보자 var badgeCount = 0; $('li').each(function() { var badge = $(this).find('.badge'); if (badge.length > 0) { $(this).css("background-color", "#FFFACD"); badgeCount += badge.length; } }); console.log("채용중인 공고는 " + badgeCount + "건 입니다.");
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRNzy6%2Fbtsf3r9uNTO%2F4z3c5B8JQKFSY8Davgkl4K%2Fimg.png)
다음과 같이 근무지가 '경기'를 포함하는 공고의 테두리 색을 바꿔보자 5px, red 로 설정 $('li').each(function() { var sDsc = $(this).find('.sDsc'); if(sDsc.find('span:contains("경기")').length>0){ // :contains()를 사용하여 span 요소에서 "경기"를 포함하는지 확인 $(this).css("border","5px solid red"); // $(this)를 사용하여 현재 선택된 요소에 스타일을 적용 } });
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQw8yc%2Fbtsf6EAgVYl%2Fj6PFV4IbXQNYURMiIq2uoK%2Fimg.png)
인재 페이지로 고고~~ 다음과 같이 '추천'마크가 있는 지원자는 눈에 더 잘 띄도록 해당 행의 배경색을 변경해보자 var Recommend = $("td.tdSummary .careerIcon:has(span.recommend)").each(function() { $(this).closest("tr").css("background-color","#FFFACD"); });
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdwBC94%2Fbtsf9ARWOIe%2FSS8ieq3tljL5WmEE67Bv6k%2Fimg.png)
채용 페이지를 살펴보면 '홈페이지 지원' 과 '즉시지원' 이 있다. 여기서 홈페이지 지원 버튼을 분홍색으로 변경해보자 $(document).ready(function() { $('li').each(function() { $(this).find('.btn-post-homepage.dev_new_pop').css("background-color", "#FFC0CB"); }); }); 여기서, "background-color" 를 설정해주어야 버튼 색이 바뀌고, 그냥 "color" 를 변경하면 해당 글자 색이 바뀐다.
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FplPKK%2Fbtsf2mnw4sP%2FO9fmYKbZ2wZe361cI12y70%2Fimg.png)
이번엔 지원자가 아닌 공애 페이지를 살펴보자 ! 공채정보중에 경영.비즈니스기획 이 있는 공채일 경우 해당 행의 배경색을 파란색으로 바꿔보자 $(document).ready(function() { $('li').each(function() { var sTit = $(this).find('.sTit'); if (sTit.find('span:contains("경영·비즈니스기획")').length > 0) { $(this).css('background-color', '#B0E0E6'); } }); }); [ 간단 코드 설명 ] 해당 키워드의 경우 sTit 클래스안에 태그에 있다. 이런 식으로.. li 안에서 sTit 클래스를 찾고, 또 span태그에 찾고자하는 키워드가 포함되어있는지 확인한다. length가 0..
![article thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaFBRt%2Fbtsf2m8JWzg%2F3Teee2w8NXMf8rR6WNwask%2Fimg.png)
지원자 중에 대학교 4년 졸업인 지원자의 경우 지원자의 이름을 빨간색으로 변경해 보자 ( 단, 졸업예정자는 제외 ) 다음과 같이 있을 때 키워드는 '(4년)' , ' 졸업' 이 될 수 있다. ( 단, '졸업에정' 인 키워드는 제외 ) $(document).ready(function() { $(".dvResumeTr").each(function() { var text = $(this).find(".dvResumeLink").text(); var keywords = ['(4년)', '졸업']; var shouldChangeColor = true; for (var i = 0; i < keywords.length; i++) { if (text.indexOf(keywords[i]) === -1 || text.in..