제이쿼리를 쓰다보면 찾은 객체에서 여러 객체를 찾아가게 되는 경우가 종종 생깁니다.
이 때 좋은 api 중 하나가 closest()입니다.
closest(selector)
선택된 element에서 selector로 고를 가장 가까운 부모 엘리먼트를 반환합니다.
예제는
li객체의 텍스트를 클릭하면 백그라운드가 파란색으로 바뀐다.
위와 같이 부모 객체를 찾는 유용한 API다.
jquery의 parents() API와 가장 큰 차이점은
하나의 객체만 반환한다는 점이다.
parents() API의 경우 여러개의 반환값으로 인해 loop를 이용하거나 특정 index를 선택해서 사용했지만 closest는 단 하나의 객체만 반환 하므로 그럴필요가 없다.
parent() API의 경우는 직계부모의 객체만 해당 되므로 다음과 같은 예제에는 사용할 수 없다.
위의 사항을 유의 하면서 parent(), parents(), closest()를 유용하게 사용해 보자.
'HTML+CSS+자바스크립트' 카테고리의 다른 글
배열(array)이 이용하는 함수 (0) | 2017.11.21 |
---|---|
favicon 만들어 적용하기. (0) | 2017.11.19 |
자바스크립트 문자열 자르기 (0) | 2017.11.19 |
form에 input text가 하나 있으면 엔터키로 submit이 가능하다. (0) | 2017.11.15 |
자바스크립트를 이용한 guid - uuid 만들기 (0) | 2017.11.14 |