• 회원가입
  • 로그인
  • 구글아이디로 로그인
그누앞단언어 jQueryLv 1

[Traversing] JQ - closest() 메서드 ★ - 선택요소 첫번째 조상 반환 (= 최근접 지정 조상요소 선택 = closest메서드 = 클로우서스트메서드|클로우세스트메서드|클로우시스트메서드)

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2,007  

목차

  1. closest() 예제 - 최근접 조상 ul 요소
  2. closest() 정의
  3. closest() / parents()  차이점

 

closest() 예제 - 최근접 조상 ul 요소

[예제]  body  >  div  >  ul  >  ul  >  li  >  span  구조 경우

 

$(document).ready(function(){

    $("span").closest("ul").css({"color": "red", "border": "2px solid red"});

});

</script>

 

결과 보기

 

closest() 정의

 

현재 요소의 지정 요소 첫 번째 조상 찾기. 

 


1.
closest("요소") 경우, 현재 요소 포함해 가장 첫번째 조상 요소 반환.
만약, 일치하는 요소가 자기 자신뿐이면, 자기 자신을 결과값으로 반환.

2.
현재 요소에서 시작해 문서 루트 요소인 <html> 요소까지 거슬러 올라가 찾음.

3.
DOM 트리 따라 이동한다는 점에서 parents() 메서드와 유사하나 약간 차이 있음.

 

cf.

 

parent() 메서드

선택 요소의 직접 부모 요소 반환


parentsUntil() 메서드

주어진 요소 사이의 모든 부모 조상 요소 반환

 

 

closest() / parents()  차이점

closest () 메서드

 

  1. 현재 요소에서 시작
  2. DOM 트리 이동해 일치하는 첫번째 조상만 반환.
  3. 반환된 jQuery 객체는 0 개 또는 하나.

 

parents() 메서드

 

  1. 부모 요소에서 시작.
  2. DOM 트리 따라 이동해 일치하는 모든 조상 반환.
  3. 반환 된 jQuery 객체는 0 개 또는 하나 이상.



jQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글
분류 제목
AJAX JQ - $.getScript() 메서드 ★ - AJAX HTTP GET 요청을 사용하여 서버에서 JS 가져…
AJAX JQ - $.param() 메서드 - 배열/객체의 직렬화 된 표현 생성 (※ AJAX 요청에 대한 URL 쿼…
AJAX JQ - $.post() 메서드 ★ - AJAX HTTP POST 요청을 사용하여 서버에서 데이터를 로드 (…
AJAX JQ - ajaxComplete() 메서드 - AJAX 요청 완료 시, 실행할 함수 지정 (= ajaxCom…
AJAX JQ - ajaxError() 메서드 - AJAX 요청 실패 시 실행할 함수 지정 (= ajaxError메서…
AJAX JQ - ajaxSend() 메서드 - AJAX 요청을 보내기 전에 실행할 함수 지정 (= ajaxSend메…
AJAX JQ - ajaxStart() 메서드 - 첫 번째 AJAX 요청이 시작될 때 실행할 함수 지정 (= ajax…
AJAX JQ - ajaxStop() 메서드 - 모든 AJAX 요청이 완료되었을 때 실행할 함수 지정 (= ajaxS…
AJAX JQ - ajaxSuccess() 메서드 - AJAX 요청이 성공적으로 완료될 때 실행할 함수 지정 (= a…
AJAX JQ - load() 메서드 - 서버에서 데이터를 로드하고 반환된 데이터를 선택요소에 저장 (= load메서…
AJAX JQ - serialize() 메서드 ★ = 전송 위해 폼 요소 집합을 직렬화 (= serialize메서드 …
AJAX JQ - serializeArray() 메서드 - 일련의 폼 요소를 이름과 값의 배열로 인코딩 (= seri…
Misc JQ - data() 메서드 ★★ - 선택요소에 데이터 첨부. / 선택요소의 데이터 반환. (= data메…
Misc JQ - get() 메서드 ★ - 선택자가 가리키는 DOM 요소 가져오기. (= get메서드 = 겟메서드)
Misc JQ - index() 메서드 ★★★ - 요소 색인번호 반환 (= 일치하는 요소 중에서 지정요소 검색 = i…
Misc JQ - $.noConflict() 메서드 - $ 변수에 대한 jQuery의 제어를 해제
Misc JQ - $.param() 메서드 - 배열/객체의 직렬화 된 표현 반환 (※ AJAX 요청에 대한 URL 쿼…
Misc JQ - removeData() 메서드 - 이전 저장데이터 제거
Misc JQ - size() 메서드 - 요소개수 (= size메서드 = 사이즈 메서드) ※ JQ3.0 폐기완료. 대…
Misc JQ - toArray() 메서드 ★ - 일치요소 배열반환 (= 선택자와 일치하는 모든 요소를 배열로 가져오…
13/15
목록
오늘: 1,263 | 어제: 7,947 | 최대: 31,885 | 전체: 11,681,209
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱닷컴, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012