[css] display : grid 검색 기능 시, 조건에 해당 안하는 값 미적용

1. 문제

(1) 영화 검색으로 하면 2번째 그리드가 안 보이기만하고, 정렬되어 안 보임

 

(2) [문제 코드] : cardContainer가 아니라 그 부모( 윗 단계의 Div를 선택했어야 했음)

let cardContainer = document.getElementsByClassName('cardContainer');

cardContainer[i].style.display = 'none'; 

function Search() {
    //입력된 검색값
    let text = document.querySelector('#searchInput').value.toUpperCase();
    let cards = document.getElementsByClassName('top');
    let cardContainer = document.getElementsByClassName('cardContainer');

    for (let i = 0; i < cards.length; i++) {
        let titleName = cards[i].getElementsByClassName('title');

        if (titleName[0].innerHTML.toUpperCase().indexOf(text) > -1) {
            cardContainer[i].style.display = 'block'; //여기가 문제
        } else {
            cardContainer[i].style.display = 'none';  //여기가 문제
        }
    }    
}

 

2. 개선

: 부모 코드를 선택해준다

(1) 

let cardContainer = document.getElementsByClassName('cardContainer');

cardContainer = > 부모 코드인 (innerDiv) 로 선택

 

(2) 

let cardContainer = document.getElementsByClassName('cardContainer');

cardContainer[i].style.display = 'none'; 

cardContainer[i].parentNode .style.display = 'none'; 

 

* 

 

* display : grid를 사용했기에, 다른 방법이 있는 줄 았았는데, 그냥 영역을 잘못 선택한거였음.