본문 바로가기
jquery

[jquery] 요소 찾기

by ponionq 2021. 1. 10.

addBack()

- 선택한 요소의 하나 이전에 선택했던 요소를 추가

 

See the Pen OJRwKdR by onion (@saetmlda) on CodePen.

 

 

closest()

-선택한 자신부터 부모  요소 중  각 요소가 지정한 선택자와 일치하는 요소

var r1 = el.closest("#div-02"); // id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.

var r2 = el.closest("div div"); // div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.

var r3 = el.closest("article > div"); // 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.

var r4 = el.closest(":not(div)"); // div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.

 

See the Pen closest by onion (@saetmlda) on CodePen.

※참고 사이트 : developer.mozilla.org/ko/docs/Web/API/Element/closest

 

Element.closest() - Web API | MDN

기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한

developer.mozilla.org

 

 

 

 

children()

-선택한 요소의 자식 요소

find()

-선택한 요소의 하위 요소 중 지정한 선택자와 일치하는 요소

See the Pen children &find by onion (@saetmlda) on CodePen.

 

 

offsetParent()

-선택한 각 요소를 배치하는 데 기준이 되는 조상 요소를 선택

See the Pen offsetParent by onion (@saetmlda) on CodePen.

※참고 사이트 : api.jquery.com/offsetParent/#offsetParent

 

.offsetParent() | jQuery API Documentation

Description: Get the closest ancestor element that is positioned. Given a jQuery object that represents a set of DOM elements, the .offsetParent() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery

api.jquery.com

 

 

 

 

parent()

-선택한 각 요소의 부모 요소를 선택

parents()

-선택한 각 요소의 조상 요소 중 지정한 선택자와 일치하는 요소를 선택

 

See the Pen parent & parnts by onion (@saetmlda) on CodePen.

 

 

 

parentsUntil()

-선택한 각 요소의 조상 요소 중 지정한 선택자와 일치하는 첫 번 째 요소의 이전 요소를 선택

-선택자가 일치하지 않거나 제공되지 않으면 모든 조상이 선택

 

See the Pen parentsUntil by onion (@saetmlda) on CodePen.

 

 

 

 

prev()

- 선택한 각 요소 앞에 있는 형재 요소를 선택

prevAll()

-선택한 각 요소 앞에 있는 모든 형재 요소를 선택

prevUntil()

-선택한 각 요소 앞에 있는 형제 요소 중 지정한 선택자와 일치하는 첫 번째 요싀 이전 요소를 선택

 

See the Pen prev&prevAll&prevUntil by onion (@saetmlda) on CodePen.

 

 

 

 

next()

-선택한 각 요소 다음에있는 형제 요소 선택

nextAll()

-선택한 각 요소 아래의 모든 형제 요소 선택

nextUntil()

-선택한 각 요소 아래의 형제 요소 중 지정한 선택자와  일치하는 첫 번 째 요소의 이전 요소를 선택

 

See the Pen next&nextAll&nextUntil by onion (@saetmlda) on CodePen.

 

 

 

 

siblings()

-선택한 각 요소의 형제 요소 중 지정한 선택자와 일치하는 요소를 선택

 

See the Pen siblings by onion (@saetmlda) on CodePen.

 

댓글