괴발개발/Javascript+JQuery

JQ_형제 요소 탐색

moonday 2021. 6. 23. 21:59

- siblings() : 모든 형제 요소들을 선택(본인 제외)      
- siblings('선택자') : 형제 요소들 중 선택자와 일치하는 요소 선택      
- next()/prev(): 다음/이전 형제 요소      
- nextAll()/prevAll() : 다음/이전 형제 요소들      
- nextAll('선택자')/prevAll('선택자'): 다음/이전 형제 요소들 중 선택자와 일치하는 요소들을 선택      
- nextUntil('선택자')/prevUntil('선택자') : 다음 요소들 중 선택자와 일치하는 요소 전까지 요소들을 선텍   
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>형제탐색</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    $(function(){
     $('#four').siblings().css('background','rosybrown');
     $('#four').siblings('#one').css('border','1px solid black');
     $('#four').prev().css('color','red');
     $('#four').next().css('font-weight','700');
     $('#four').prevAll().css('text-decoration','underline');
     $('#four').nextAll().css('padding-left','20px');
     $('#four').prevAll('#one').css('width','400px');
     $('#four').nextAll('.six').css('text-align','center'); 
    })
  </script>
</head>
<body>
  <ul>
    <li class="list" id="one">1</li>
    <li class="list">2</li>
    <li class="list">3</li>
    <li class="list" id="four">4</li>
    <li class="list">5</li>
    <li class="list six">6</li>
  </ul>
</body>
</html>

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JQ_질문등록창(+서브질문등록)  (1) 2021.06.24
JQ_필터(탐색)  (0) 2021.06.23
JQ_자손 요소 탐색  (0) 2021.06.23
JQ_조상 탐색  (0) 2021.06.23
JQ_길이 예제(inner,outer/Width,Height)  (0) 2021.06.23