jQuery

jQuery 문제 풀이 (16번~21번)

흑백논리 2023. 1. 25. 16:56
반응형

[16번 문제] [추천]하는 이력서인 경우 해당 행의 배경색을 노란색으로 바꾼다

$("span.person-resume--recommand").closest("tr").css("background", "yellow");

-> span의 클래스인 person-resume--recommand의 상위 tr 배경색을 노란색으로 바꿈

 

[17번 문제] 근무지가 [경기]를 포함하는 공고일 경우 행의 테두리를 빨간색(5px)으로 바꾼다

$("div.titBx:contains('경기')").closest("tr").css({"border":"solid red 5px"});
$("span.cell:contains('경기')").closest('tr').css({"border": "5px solid red"})

-> div 또는 span의 클래스에 contains를 통해 '경기'를 포함하는 상위 tr의 테두리를 변경

 

[18번 문제] 채용중인 공고의 경우 배경 색을 노란색으로 바꾸고 콘솔창에 [채용중인 공고는 N건 입니다]를 출력

$("td.odd:contains('지원')").closest("tr").css("background", "yellow");
$(document).ready(function(){
alert('채용중인 공고는 ' + $('.odd:contains("지원")').length + ' 건입니다.');});

-> td의 클래스에 contains로 '지원'을 포함하는 사우이 tr의 배경색을 바꾸고 function을 통해 문자열을 출력

 

[19번 문제] 경력을 기준으로 Sort

function career(val) {
    var _value = val.trim();
    if(_value == '신입') {
        return 0;
    } else {
        var j = _value.substring(2, _value.length);
        return a(j);
    }
}

function a(val) {
    var year = val.substring(0, val.indexOf('년'));
    year = year * 12;
    var month = val.substring(val.indexOf('년') + 1, val.indexOf('개월'));
    var k = parseInt(year) + parseInt(month);
    return k;
}

$(".table-list--person  tr").each(function(i, row) {
    var $thisRow = $(row).find("[class^='person-resume__career--']");
    var rowids = career($thisRow.text());
    $thisRow.data("tmpCareer", rowids)
});

$(".table-list--person  tr").sort(function (b, c) {
    return $(c).find("[class^='person-resume__career--']").data("tmpCareer") - $(b).find("[class^= 'person-resume__career--']").data("tmpCareer");
})

$(".table-list--person  tr").empty();

Array.from($(".table-list--person  tr")).sort().forEach(function (el, i) {
$tbody.append(el);
         });

->처음에 경력 부분에 해당하는 곳의 문자열을 파악하기 위해서 공백을 제거하고 '신입'일 경우 0의 값을 반환하고 다른 문자열일 경우 년도와 개월수를 파악하기 위해 '경력' 혹은 '신입'의 뒤의 자리부터 데이터를 받게 만듬과 동시에 년도를 개월 수로 치환하여 결과값으로 합산값을 돌려받게 됨.
이후 'tbody'부분에는 벡지화를 통해 새로운 html을 출력하기 위한 함수 '$tbody'와 'tr'의 값과 경력의 개월 수 값을 '.each'를 통해서 '$thisrow'와 'rowids'에 저장함.
그리고 'rowids'에 저장된 값을 '$thisRow.data'에 정의하기 위해 'tmpCareer'라는 값으로 지정하고 '.sort' 함수를 통해 'person-resume__career--'를 포함하는 '(b)'와 '(a)'의 차이값으로 정렬을 할 수 있게 만듬.
그 다음에 'tbody'에 있는 기존의 'tr'값을 비우고 'Array'를 통해 정렬한 값을 'tbody'에 출력되도록 함.

 

[20번 문제] 서울 지역 tr만 남기고 모두 지우기

$("tr:not(:contains('서울'))").closest("tr").remove();

-> tr에서 not을 통해 '서울'을 포함하지 않는 상위 tr을 제거함

 

[21번 문제] 한 페이지에 있는 모든 글자를 파란색으로 변경

$("*").css("color", "blue");

-> "*"으로 페이지 전체를 선택 후 글자 색을 변경

반응형