DescriptionThe find( selector ) method searches for descendant elements that match the specified selector. SyntaxHere is the simple syntax to use this method − selector.find( selector ) ParametersHere is the description of all the parameters used by this method −
ExampleFollowing is a simple example a simple showing the usage of this method. <html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
</div>
</body>
</html>
This will produce following result − ExampleFollowing is a simple example a simple showing the usage of this method. <html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<p><span class = "selected">Hello</span>, how are you?</p>
<p>Me? I'm <span class = "selected">good</span>.</p>
</div>
</body>
</html>
This will produce following result − jquery-traversing.htm  제이쿼리를 사용해 자식요소를 선택하는 메소드로 find()를 사용할 수 있습니다. 아래는 제이쿼리의 메소드 find()에 대하여 자세히 알아봅니다. # 제이쿼리 find() 메소드 알아보기 $(선택요소).find('찾을조건') 그럼 간단한 예제를 통해 알아보도록 하겠습니다. 만약 아래와 같은 소스코드가 있다고 할 경우 div 태그내의 모든 p태그를 찾으려면 어떻게 해야하는지 알아보겠습니다. 먼저 html 코드입니다. <div> 아래는 스크립트 코드입니다. testEle = $('div').find('p'); // div 태그의 자식요소들 중 p 태그를 서칭하여 반환 제이쿼리를 사용해 변수 testEle에 div 태그의 자식요소중 p 태그를 모두 지정한 예제입니다. find()태그를 사용하면 자식 요소안에서만 찾을 수 있기 때문에 찾는 범위를 줄이고 오차 역시 줄일 수 있는 장점이 있습니다. 자식 요소안에서 찾는 함수중 filter() 함수도 존재합니다. 하지만 filter() 함수는 자식요소내에서 찾는것이 아닌 현재요소를 기준으로 범위를 줄여간다고 생각하시면 될 것 같습니다. # 마치면서 ! find()는 자기 자신을 포함할까요? $(this).parent().find('.test') 저 역시 궁금하여 테스트 해보았으나 자기 자신 요소는 제외되니 참고하세요. 봉봉의 개인 블로그입사후 공부한내용 2018-01-12(JQuery 자식 요소 선택 방법 및 찾기 Children(), find())봉봉이네 2018. 1. 12. 12:18 .Children() JQuery를 사용하여 간단하게 자식 요소를 선택하는 방법을 알아보려고 합니다. 자식 요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다. #JQuery children() 자식 요소 얻기 위에 잠시 언급한 find() 그리고 오늘 알아볼 children()의 차이점을 알아보겠습니다. 이 둘의 차이점이라면 children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나, find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올수 있다는 점이 차이점이다. 그럼 children()의 간단한 사용방법은 아래와 같습니다. $(element).children(option) 괄호안의 선택옵션은 필수가 아닌 선택입니다. 만약 옵션을 입력할 경우 특정 요소만 필터링 하여 반환하는 것이 가능합니다. 즉 아래와 같이 사용할 수 있습니다. !children() 옵션 사용하여 찾기 예제보기 아래는 red라는 클래스 명을 가진 자식 요소만 찾아서 반환합니다. @children.html @children.js
위 코드를 실행하면 red 클래스를 가진 요소만 선택됩니다. 그럼 아래에서 다른 방법의 예제를 알아보세요. # children()함수 예제보기 이번 예제는 모든 자식요소를 jQuery 셀렉터로 선택하는 방법을 알아보려합니다.여기서는 div태그의 자식 요소를 먼저 성택해보겠습니다. 그리고 이를 변수 childrens에 저장해보겠습니다. @children.html
@children.js
실행하면 위 태그에서 div 태그의 모든 자식요소가 변수에 저장되었을 것입니다. 즉 변수 childrens는 div태그 요소의 모든 자식 요소들이 저장되었습니다. (참고로 일반적으로 제이쿼리 엘리먼트 요소를 변수로 저장할때는 $를 앞 또는 뒤에 추가하여 나타냅니다. 즉 childrens 보다는 $childrens 또는 childrens$ 로 사용합니다.) #자식 요소에서 원하는 요소만 선택하는 방법 그럼 또 다른 예제입니다. 앞에도 알아봤지만 옵션을 선택하면 자식 요소의 필터링... 즉 좀더 정확한 자식 요소만 가져올 수 있습니다. 바로 괄호 안의 매개변수로 선택사항을 추가입력하면 됩니다. 아래 예제를 봐주세요. !자식 요소중에서 span 태그 요소만 가져오기 이번에는 자식 요소에서 span 태그 요소만 가져오는 방법입니다. @children.html
태그의 이름이 span인 것만 가져오기 위해 아래처럼 스크립트를 작성 후 실행합니다. @children.js
이제 div 자식 요소중에서 span 태그 요소만을 선택되었습니다. .find() 개요 : 선택된 요소 집합에서 선택자, jquery 객체, 요소와 같은 인자에 맞는 요소들을 걸러내어 줍니다. .find(selector) *selector : 일치하는 요소를 위한 선택자가 표현된 문자열* .find(jQuery object) *jQuery object : 요소를 찾을 jQuery 객체* .find(element) *element : 요소를 찾을 요소 표현* jQuery 객체를 이용해서 표현된 DOM 요소 집합에 .find()함수를 사용하면 DOM tree 에서 하위(자식) 요소들을 찾아내어 새로운 jQuery 객체를 생성합니다. .find() 와 .children() 함수는 비슷합니다. 하지만 .children() 함수는 직계 자식 요소만을 추출할 수 있는 것이 .find()함수와 다른 점입니다. 예제를 보겠습니다.
item II를 기준으로 li 요소들을 모두 찾아내는 스크립트는 아래와 같습니다.
이 스크립트에 영향을 받는 li 요소들은 A,B,1,2,3,C 입니다. 즉, 하위 (자식)요소들을 깊이에 상관없이 모두 찾아내어 준다는 뜻입니다. 위에서도 말씀드렸듯이 .children()과 가장 큰 차이점입니다. 참고로 jquery 객체를 .find() 함수에 인자로 넣을 수 있습니다. 아래와 같은 방법으로 해보십시오.
|
제이쿼리 find - jeikwoli find
저작권 © 2024 nguoilontuoi Inc.
