순회(탐색) 메소드 3 ( sideways 메소드, is("css선택자") )

• sideways(옆으로, 옆에서) 메소드
  - 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
  
  - $("요소명").siblings( [ 매개변수 ] )
     - 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
     - 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴
  
  - $("요소명").next( )
     - 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
  
  - $("요소명").nextAll( )
     - 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴
  
  - $("요소명").nextUntil(매개변수)
     - 선택된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴
  
  - $("요소명").prev( )
     - 선택된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
  
  - $("요소명").prevAll( )
     - 선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든 요소 리턴
  
  - $("요소명").prevUntil(매개변수)
     - 선택된 요소의 같은 레벨 중 매개변수 이전까지의 모든 요소 리턴

<div class="wrap">div (parent)
   <p>p</p>
   <span>span</span>
   <h2>h2</h2>
   <h3>h3</h3>
   <p>p</p>
</div>

<span>테스트용 span 태그</span>
<h2>테스트용 h2태그</h2>

// css()의 매개변수로 사용할 코드를 미리 변수에 저장하기
const style1 = {"border" : "2px solid red", color : "red"};
const style2 = {"border" : "2px solid blue", color : "blue"}
const style3 = {"border" : "2px solid green", color : "green"};
const style4 = {"border" : "2px solid yellow", color : "yellow"};
const style5 = {"border" : "2px solid violet", color : "violet"};

// h2태그의 형제 요소에 스타일을 style1으로 설정
$("h2").siblings().css(style1);

// h2 태그의 형제 요소 중 p 태그만 style2를 적용
$("h2").sibling("p").css(style2);

// span 태그 다음에 오는 형제 요소의 스타일을 style3로 설정
$("span").next().css(style3);

// h2 태그 다음에 오는 모든 형제 요소의 스타일을 style4로 설정
$("h2").nextAll().css(style4);

// span 태그부터 h3 태그까지 폰트 크기를 24px로 변경
$("p").nextUntil("p").css("fontSize", "24px");

See the Pen 24-12-24 jquery 2-2 by Namu (@Namu-the-sans) on CodePen.

---

<div class="wrap">div (parent)
   <p>p</p>
   <span>span</span>
   <h2>h2</h2>
   <h3>h3</h3>
   <p>p</p>
</div>

<span>테스트용 span 태그</span>
<h2>테스트용 h2태그</h2>

// is("css 선택자")
// 지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가
// 존재하는지 확인하는 메소드
// 존재하면 true, 없으면 false 반환

// h2 태그 이전에 있는 모든 형제 요소 중 p 태그가 있는지 확인
console.log($("h2").prevAll().is("p")); // true

// h2 태그 이전에 있는 모든 형제 요소 중 pre 태그가 있는지 확인
console.log($("h2").prevAll().is("pre")); // true

$("span").on("click", function(){
  
  console.log($("span")); // span 태그 요소를 포함하는 jquery 배열
  
  console.log(this); // span 태그 요소
  
  console.log($(this)); // 클릭한 span 태그 요소만 포함하는 jquery 배열
})

// h2 태그를 클릭했을 때
// 클릭한 요소의 이전 요소 배경색을 red, 글자를 white로 변경
$("h2").on("click", function(){
 $(this).prev().css({"backgroundColor" : "red", "color" : "white"});
})

See the Pen 24-12-24 jquery 2-3 by Namu (@Namu-the-sans) on CodePen.