-
[Javascript] JQuery 상위요소(상위태그) 선택하기 or 부모요소(부모태그) 선택하기Javascript 2021. 6. 19. 03:32반응형
#JQuery 상위요소(상위태그) 선택하기 or 부모요소(부모태그) 선택하기
회사 업무중 특정 조건에 만족할 경우 해당 상위요소의 css 를 변경 할 일이 있었는데
이때 사용했던 특정 상위 객체를 가져오는 parents 와 closest 을 까먹지 않게 기록으로 남기기
Sample Code 1.
다음과같은 li 태그 하위에 있는 a 태그의 값이 짝수일 경우 css 를 변경하는 상황을 연출
each 문을 통해 해당 li 태그 하위에있는 a 태그의 값을 $(this) 를 통해 가져온 후 % 2를 하여
나머지가 0 으로 떨어지는 짝수의 값을 구한후 해당 값의 상위 li 를 closest 을 통해 css 속성을 변경하였다.
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $( document ).ready(function() { $("li a").each(function(index, item){ if((Number($(this).text()) % 2) === 0) { $(this).css("color","#d632ff").closest("li") .css("list-style-type","circle"); } }); }); </script> <style> #ul_list > li.squareStyle { list-style-type:square; color: #f05252; } </style> </head> <body> <ul id="ul_list"> <li class="squareStyle"><a href="#">01</a></li> <li class="squareStyle"><a href="#">02</a></li> <li class="squareStyle"><a href="#">03</a></li> <li class="squareStyle"><a href="#">04</a></li> <li class="squareStyle"><a href="#">05</a></li> <li class="squareStyle"><a href="#">06</a></li> <li class="squareStyle"><a href="#">07</a></li> <li class="squareStyle"><a href="#">08</a></li> <li class="squareStyle"><a href="#">09</a></li> <li class="squareStyle"><a href="#">10</a></li> <li class="squareStyle"><a href="#">11</a></li> <li class="squareStyle"><a href="#">12</a></li> </ul> </body> </html>
Sample Code 2.
여기서 parents 와 closest 의 차이가 있는데 parents 함수는 인자값으로 잡히는 모든
상위 요소를 반환 하지만 closest 함수는 parents 함수와 달리 상위 요소중
가장 근접한 하나를 반환한다. 다음 예제를 확인하면 그 차이를 구분 할 수 있다.
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $( document ).ready(function() { $("span").parents("div").attr("class", "parents"); //parents 함수는 span 태그 의 모든 상위 div 를 반환하여 css를 적용 // $("span").closest("div").attr("class", "closest"); //closest 함수는 span 태그 의 바로 위 상위 div 를 반환하여 css를 적용 }); </script> <style> .div { background-color: darkgrey; } .p { color: darkred; } .parents { background-color: rgb(117, 50, 179); color: rgb(223, 185, 19); } .closest { background-color: rgb(50, 179, 108); color: rgb(243, 18, 18); } </style> </head> <body> <div class="div" style="width: 50%;height: 100px;"> <div class="p"> <span>parents 와 closest 차이</span> </div> </div> </body> </html>
JQuery 상위요소(상위태그) 선택하기 or 부모요소(부모태그) 선택하기
parents 와 closest 차이 기록으로 남기기
반응형'Javascript' 카테고리의 다른 글
[Javascript] 자바스크립트(jQuery) 를 사용한 달력 만들기 (0) 2022.07.11 [Javascript] textarea 줄바꿈 (0) 2022.07.08 [Javascript] jQuery 팝업창 오늘하루 그만보기 (1) 2022.06.27 [Javascript] ajax error 확인 (0) 2021.07.08 [Javascript] jQuery 사용하기 (0) 2021.04.14