js 요소 선택 함수 모음(입소 준비 공부중)

언제 쓸까

개인적인 프로젝트를 진행하면서 바로 저 심볼의 타이틀을 불러오는 코드를 깔끔하게 작성하기 위해 굉장히 애를 많이 먹었다.
처음에는 파일을 분리해 놓았기 때문에 search.js의 전역 변수로 모든 symbol의 정보를 담은 뒤 arc_quest.js에 보냈으나 이 경우 엔터가 전송되어야하는 카드의 이름이 어떤 것인지 알기 어려웠으며 그것을 찾기 위한 코드를 작성해보니 반복되는 부분으로 인해 상당히 지저분한 결과물이 탄생했다.

요소 찾기

나의 경우 20레벨이 아닌 경우에만 input을 받고, 엔터를 누르면 내 입력값이 전송되는 방식의 작동을 원했으므로 입력이 존재하는 곳의 카드 속 심볼 정보를 받는 것이 중요했다.
이럴 때에는 해당 카드를 찾아주기 위하여 input.closest('.card')를 사용해주면 간단하게 처리 가능하다.

간단 사용법

.closet()는 선택한 요소로부터 가장 가까운 요소를 반환한다.
즉 내가 작성한 코드에 대해 설명하자면 input의 가장 가까이에 있는 card를 출력하는 것이다.

문제점

즉 20레벨 미만의 카드가 여러개일 경우 원하는 값을 가져올 수 없다.
나는 이 부분을 고려하지 않아 코드를 다시 작성하는 중이다.

모든 부모 불러오기

.parents()를 사용하면 모든 부모 요소를 반환한다.
아직까지 언제 사용하면 좋을지는 잘 모르겠다.

바로 위 부모

.parent()를 사용하면 바로 위에 있는 부모 요소를 반환한다.

모든 자식 불러오기

.child()를 사용하면 모든 자식 요소를 반환한다.
또한 함수의 괄호 안에는 필터링하고 싶은 특정 요소만을 작성하는 것도 가능하다.

특정 자식

예를 들어 자식의 요소 안에 있는 span을 불러오고 싶다고 하자.
이 경우 $('div').children('span')이런 식으로 사용하면 원하는 대로 코드가 돌아갈 것이다.

필터링된 자식

이 경우 find를 사용하면 된다.
위에서 필터링된 자식을 불러오는 것과 차이로는 find 안에는 조건을 넣을 수 있으며, style요소를 작성하는 것도 가능하다.

  $(document).ready(function() {
    // find를 사용하여 클래스가 .child인 자식 찾기
    const filteredChildren = $('#parent').find('.child');

    // 찾은 자식에 대해 CSS 변경
    filteredChildren.css('font-weight', 'bold');
  });