괴발개발/Javascript+JQuery

JQ_조상 탐색

moonday 2021. 6. 23. 21:43

- parent() : 부모 요소를 선택
- parents() : 조상 요소를 선택(부모 요소도 포함)
- parents('선택자') : 조상 요소들 중 선택자에 맞는 요소들을 선택
- parentsUntul('선택자') : 부모부터 시작해서 선택자와 일치하는 조상요소 전까지의 조상요소들을 선택(선택자와 일치하는 요소는 제외)
<!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(){
     $('.link').parents().css('border', '2px solid red');
     $('.link').parent().css('border-color','black')
     $('.link').parents('ul').css('background','brown'); //조상들중에 ul태그만
     $('.link').parentsUntil('.box').css('border-radius', '20px'); //box클래스전까지테두리둥글게
    })
  </script>
  <style>
    *{ padding: 10px; list-style: none; background: white;}
    a{display: block;}
  </style>
</head>
<body>
  <div class="box">
    box
    <div class="inner-box">
      inner-box
      <ul>
        ul
        <li>
          li
          <a href="#" class="link">메뉴1</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

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

JQ_형제 요소 탐색  (0) 2021.06.23
JQ_자손 요소 탐색  (0) 2021.06.23
JQ_길이 예제(inner,outer/Width,Height)  (0) 2021.06.23
JQ_CSS메소드  (0) 2021.06.23
JQ_메뉴선택예제  (0) 2021.06.23