.find (selector)
.find (selector)
설명 : 셀렉터, jQuery 객체 또는 요소로 필터링 된 일치하는 요소의 현재 세트에서 각 요소의 하위 항목을 가져옵니다.
DOM 요소 집합을 나타내는 jQuery 객체가 주어지면이 .find()메소드를 사용하여 DOM 트리에서 이러한 요소의 자손을 검색하고 일치하는 요소에서 새 jQuery 객체를 생성 할 수 있습니다. The .find()와 .children()메소드는 유사하지만, 후자는 단일 레벨을 DOM 트리로 이동한다는 점만 다릅니다.
이 .find()메소드 의 첫 번째 서명 은 $()함수에 전달할 수있는 동일한 유형의 selector 표현식을 허용 합니다. 이 선택기와 일치하는지 여부를 테스트하여 요소를 필터링합니다. 허용되는 표현식에는 > pjQuery 객체에있는 요소의 하위 인 모든 단락을 찾는 선택기가 포함됩니다.
기본 중첩 목록이있는 페이지를 고려해보십시오.
ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
항목 II에서 시작하면 목록 항목을 찾을 수 있습니다.
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );
이 호출 결과 항목 A, B, 1, 2, 3 및 C에 빨간색 배경이 표시됩니다. 항목 II가 선택자 표현식과 일치하더라도 결과에는 포함되지 않습니다. 후손 만이 경기의 후보로 간주됩니다.
대부분의 트리 순회 방법과는 달리, 셀렉터식이 필요합니다 .find(). 모든 하위 요소를 검색해야하는 경우 유니버셜 선택기 '*'를 전달 하여이를 수행 할 수 있습니다 .
선택기 컨텍스트 는 .find() method;따라서 구현 $( "li.item-ii" ).find( "li" )됩니다 $( "li", "li.item-ii" ).
jQuery 1.6 부터 특정 jQuery 콜렉션 또는 요소를 사용하여 선택 사항을 필터링 할 수도있다. 위와 같은 중첩 목록을 사용하여 시작하는 경우 :
var allListElements = $( "li" );
그런 다음이 jQuery 객체를 전달하여 다음을 찾습니다.
$( "li.item-ii" ).find( allListElements );
이것은 항목 II의 하위 항목 인 목록 요소 만 포함하는 jQuery 콜렉션을 리턴합니다.
마찬가지로 요소를 찾아서 전달할 수도 있습니다.
var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );
이 호출의 결과는 항목 1에 빨간색 배경이됩니다.
예 :
모든 단락으로 시작하여 descendant span 요소를 검색합니다. $( "p span" )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$( "p" ).find( "span" ).css( "color", "red" );
</script>
</body>
</html>