경력지원자는 다 지우고 신입만 남겨두어 신입 지원자들을 강조해보자 여기서 신입만 남겨두기 // careerIcon 클래스를 가진 td 요소들 중에 신입이 아닌 경우 해당 요소를 삭제하는 코드 var Experienced = $("td.tdSummary .careerIcon:not(:has(span.newcomer))").each(function() { $(this).closest("tr").remove(); // 해당 요소 삭제 });
해당 페이지에서 '신입' 인 경우 배경색을 오렌지로 바꾸고 콘솔창에 신입 지원자의 갯수를 출력해보자 신입의 경우 다음과 같이 클래스네임이 지정되어있으므로 이를 이용하면 될 것 같다 1. 해당 인덱스에 대해서만 ( 1 page ) // careerIcon 클래스를 가진 td 요소들 중에 신입인 경우 배경색을 바꾸고 개수를 세는 코드 var numNewcomers = $("td.tdSummary .careerIcon span.newcomer").each(function() { $(this).closest("tr").css("background-color", "orange"); // 배경색 변경 }).length; console.log("신입 지원자는 총 " + numNewcomers + "명 입니다"); /..
1~3번째에 해당하는 item의 테두리를 변경해보자 테두리 색은 노란색으로, 굵기는 2px 로 지정 $("tbody tr.dvResumeTr").slice(0, 3).css({ "border": "2px solid yellow" });
지원자들의 나이가 20대라면 배경색을 빨간색으로 변경해보자 $("tbody tr").each(function(index) { // 각 태그 안의 태그에서 나이 정보 추출 var age = parseInt($(this).find("dd").text().match(/\d+/)[0]); // 나이가 20대인 경우 배경색을 빨간색으로 변경 if (age >= 20 && age < 30) { $(this).css("background-color", "red"); } }); '$()' 함수 : jQuery 에서 가장 기본적인 선택자로 태그의 자식인 태그를 선택 each() 메서드 : 선택한 요소들에 대해 반복문을 실행한다. 태그들을 하나씩 돌리면서 각각의 특성을 분석 $(this) : 현재 처리중인 태그를 가리킨다..
짝수번째에 해당하는 지원자 인덱스의 색을 노란색으로 변경해봅시다 // tbody 요소 안에 있는 모든 tr 요소를 선택합니다. var $trElements = $('tbody tr'); // each() 메서드를 사용하여 선택된 모든 tr 요소에 대해 반복합니다. $trElements.each(function(index) { // 짝수 번째 tr 요소인 경우에만 실행합니다. if (index % 2 == 1) { // 선택된 tr 요소에 노란색 배경색을 추가합니다. $(this).css('background-color', 'yellow'); } }); 인덱스는 0,1,2 ''' 순서로 간다 1번째,3번째 인덱스의 색을 바꾸는 것이 가시적으로 보여지는 짝수번째 행을 지우는 방법이다. 따라서 2로나눈 나머지..
1번째와 2번째 인덱스 위치를 바꿔보자 // 첫 번째 tr 요소를 선택합니다. var $firstTr = $('tr[data-rno="10988116"]'); // 두 번째 tr 요소를 선택합니다. var $secondTr = $('tr[data-rno="19516969"]'); // 첫 번째 tr 요소를 두 번째 tr 요소 바로 뒤로 이동합니다. $firstTr.insertAfter($secondTr); 짠
최OO 씨가 있는 item 칸을 지워보자 위치를 보면 저기 있다 // 클래스 선택자(.)[속성값].remove(); $("tr.dvResumeTr[data-rno='23767804']").remove();