Jquery에서 가장 가까운 방법을 사용하는 방법-프런트엔드 Q&A-php.cn

Jquery에서 가장 가까운 방법을 사용하는 방법

WBOY

풀어 주다： 2022-05-09 11:35:06

원래의

3358명이 탐색했습니다.

jquery에서는 가장 가까운 메서드를 사용하여 선택한 요소의 첫 번째 조상 요소를 반환합니다. 이 함수는 요소 자체부터 위쪽으로 일치할 수 있으며 일치하는 첫 번째 요소가 없으면 빈 jQuery를 반환합니다. 객체의 경우 구문은 "element object.closest(요소와 일치하는 선택기 표현식)"입니다.

Jquery에서 가장 가까운 방법을 사용하는 방법

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

jquery에서 가장 가까운 메서드를 사용하는 방법

closest() 메서드는 선택한 요소의 첫 번째 상위 요소를 반환합니다.

조상으로는 아버지, 할아버지, 증조할아버지 등이 있습니다.

현재 요소에서 시작하여 DOM 트리를 탐색하고 전달된 표현식과 일치하는 첫 번째 단일 조상을 반환하고 0개 또는 1개의 요소가 포함된 jQuery 객체를 반환합니다.

closest() 함수는 먼저 현재 요소가 일치하는지 확인합니다. 일치하는 항목이 있으면 요소 자체를 직접 반환합니다. 일치하는 항목이 없으면 선택기와 일치하는 요소를 찾을 때까지 레이어별로 상위 요소를 위쪽으로 검색합니다. 아무것도 발견되지 않으면 빈 jQuery 객체가 반환됩니다.

구문은 다음과 같습니다.

선택한 요소의 첫 번째 상위 요소를 반환합니다.

$(selector).closest(filter)

로그인 후 복사

DOM 컨텍스트를 사용하여 찾은 DOM 트리의 첫 번째 상위 요소를 반환합니다.

$(selector).closest(filter,context)

로그인 후 복사

filter 필수입니다. 상위 요소 검색 범위를 좁히는 선택기 표현식, 요소 또는 jQuery 개체를 지정합니다.

컨텍스트 선택사항입니다. 일치하는 요소를 찾을 수 있는 DOM 요소입니다.

예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.ancestors *{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖先节点)
<div style="width:500px;">div (曾祖先节点)
<ul>ul (第二祖先 - 第二祖先节点) 
<ul>ul (第一祖先 - 第一祖先节点)
<li>li (直接父节点)
<span>span</span>
</li>
</ul>
</ul>   
</div>
</body>
<!-- 在这个例子中, $("span").closest("ul") 指我们查找一个span元素的第一个ul祖先。最靠近span的祖先是li,但是由于查到一个div，jQuery 跳过li元素继续查找下一个祖先，直到它找出我们要查找的ul.假如我们用parents() 方法替代，它将返回ul的祖先 。 --> 
</html>

로그인 후 복사

출력 결과:

Jquery에서 가장 가까운 방법을 사용하는 방법