[jQuery] 요소의 탐색 (형제 요소의 탐색)

복습

https://shins99.tistory.com/86

[jQuery] 요소의 탐색 (조상 요소의 탐색)

---

형제 요소의 탐색

---

형제(sibling) 요소의 탐색

- DOM 트리에서 특정 요소의 형제(sibling) 요소를 탐색하기 위한 메서드

 

1. .siblings()

2. .next()

3. .nextAll()

4. .nextUntil()

5. .prev()

6. .prevAll()

7. .prevUntil()

---

.siblings() 메서드

- 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택

예제
$(function() {
    $("button").on("click", function() {
        $("h4").siblings()                 // <h4>요소의 형제 요소를 모두 선택함.
        .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
    });
});

 

---

.next() 메서드

- 선택한 요소의 바로 다음에 위치한 형제 요소를 선택

 

예제
$(function() {
    $("button").on("click", function() {
        $("h4").next()                     // <h4>요소의 바로 다음 형제 요소를 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});

---

.nextAll() 메서드

- 선택한 요소의 다음에 위치한 형제 요소를 모두 선택

(선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만을 선택할 수도 있음)

예제
$(function() {
    $("button").on("click", function() {
        $("h4").nextAll()                  // <h4>요소의 다음에 있는 형제 요소를 모두 선택함.
        .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
    });
});

 

---

.nextUntil() 메서드

- 선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택

(선택자를 인수로 전달하지 않으면, .nextAll() 메서드와 같이 선택한 요소의 다음에 위치한 형제 요소를 모두 선택)

예제
$(function() {
    $("button").on("click", function() {
        // <h4>요소의 형제 요소 중에서 첫 번째 <p>요소의 바로 이전까지의 모든 요소를 선택함.
        $("h4").nextUntil("p")
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
    });
});

 

---

.prev(), .prevAll(), .prevUntil() 메서드

- 이 메서드들은 각각 .next(), .nextAll(), .nextUntil() 메서드와 정반대로 동작하여 요소들을 선택

---

형제 요소를 탐색하는 메서드

.siblings()	선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택함.
.next()	선택한 요소의 바로 다음에 위치한 형제 요소를 선택함.
.nextAll()	선택한 요소의 다음에 위치한 형제 요소를 모두 선택함.
.nextUntil()	선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함.
.prev()	선택한 요소의 바로 이전에 위치한 형제 요소를 선택함.
.prevAll()	선택한 요소의 이전에 위치한 형제 요소를 모두 선택함.
.prevUntil()	선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택함.