[Traversing] JQ - siblings() 메서드 - 선택요소의 모든 형제요소 반환. (= siblings메서드 = 시블링메서드)

목차

1. siblings() 예제 - 모든 형제요소의 스타일 변경.
2. siblings() 정의 
3. siblings() 구문 
4. siblings() 예제 - 특정 형제요소의 스타일 변경.
5. siblings() 예제 - 특정 형제요소 토글.

siblings() 예제 - 모든 형제요소의 스타일 변경.

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("li.js").siblings().css({"color": "red", "border": "2px solid red"});

});

</script>

<div class="hz">

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li class="js">JS</li>

        <li>PHP</li>

        <li>SQL</li>

    </ul>   

</div>

 

결과보기

siblings() 정의 

 

지정 요소의 모든 형제 요소 (= 동일 부모 요소 갖는 요소) 반환.

 

---

 

1.

DOM 요소의 형제를 따라 앞뒤로 이동.

 

2.

prev() : 이전 형제요소
next() : 다음 형제요소

 

siblings() 구문 

 

$(selector).siblings(filter)

 

---

[매개변수]

 

filter

선택. 형제 요소 검색 범위를 좁히기 위한 선택자 표현식 지정.

 

siblings() 예제 - 특정 형제요소의 스타일 변경.

 

<style>

.hz * { 

  display: block;

  border: 2px solid lightgrey;

  color: lightgrey;

  padding: 5px;

  margin: 15px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("li.js").siblings(".server").css({"color": "red", "border": "2px solid red"});

});

</script>

<div class="hz">

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li class="js">JS</li>

        <li class="server">PHP</li>

        <li class="server">SQL</li>

    </ul>   

</div>

 

결과보기

siblings() 예제 - 특정 형제요소 토글.

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

  $(".btn").on("click", function() {

      $('.con').hide();

      $(this).siblings(".con").toggle();

  });

});

</script>

<style>

li {position:relative; border:1px solid silver; width:50px;}

.con {display:none; position:absolute; top:0; right: -50px;}

</style>

 

<!-- 리스트1 -->

<ul>

  <li>

    <a class="btn">버튼1</a>

    <div class="con">내용1</div>

  </li>

  <li>

    <a class="btn">버튼2</a>

    <div class="con">내용2</div>

  </li>

  <li>

    <a class="btn">버튼3</a>

    <div class="con">내용3</div>

  </li>

</ul>

 

결과보기