게으른 개발자의 끄적거림

[jQuery] .siblings() .next() .prev() 간단 설명

끄적잉 2023. 7. 17. 22:06
반응형

 

jQuery의 .siblings(), .next(), 그리고 .prev()는 DOM 요소를 조작하는데 사용되는 메서드입니다. 이들 메서드는 주어진 요소의 형제 요소를 선택하고, 다음 요소 또는 이전 요소를 선택하는데 도움을 줍니다.

  • .siblings(): 이 메서드는 주어진 요소의 형제 요소를 선택합니다. 형제 요소란 같은 부모 요소를 공유하는 요소들을 말합니다.

$(selector).siblings();

 

위의 코드에서 $(selector)는 형제 요소를 찾고자 하는 요소를 선택하는 부분입니다. 이 메서드는 주어진 선택자에 해당하는 요소의 형제 요소들을 반환합니다.

  • .next(): 이 메서드는 주어진 요소의 다음 요소를 선택합니다. 다음 요소란 DOM 구조에서 현재 요소의 다음 위치에 있는 요소를 말합니다.

$(selector).next();

 

위의 코드에서 $(selector)는 다음 요소를 찾고자 하는 요소를 선택하는 부분입니다. 이 메서드는 주어진 선택자에 해당하는 요소 중 첫 번째 다음 요소를 반환합니다.

  • .prev(): 이 메서드는 주어진 요소의 이전 요소를 선택합니다. 이전 요소란 DOM 구조에서 현재 요소의 이전 위치에 있는 요소를 말합니다.

위의 코드에서 $(selector)는 이전 요소를 찾고자 하는 요소를 선택하는 부분입니다. 이 메서드는 주어진 선택자에 해당하는 요소 중 첫 번째 이전 요소를 반환합니다.

 

이들 메서드는 주로 DOM 트리에서 탐색하고 조작해야 할 특정 요소를 선택할 때 사용됩니다. 예를 들어, .siblings()를 사용하여 특정 요소의 형제 요소들을 선택하거나, .next() 및 .prev()를 사용하여 특정 요소의 다음 또는 이전 요소를 선택할 수 있습니다. 이를 통해 요소 간의 상호작용이나 위치 기반 조작을 수행할 수 있습니다.

반응형