예제를 사용하여 filter() 및 find()의 사용법과 children() 및 find()_jquery 간의 차이점 분석을 설명합니다.

Jquery의 find() 메소드와 filter() 메소드는 초보자가 혼동하기 쉽습니다. 여기서는 작은 예를 통해 이 두 메소드를 비교하고 설명하겠습니다. 이 두 가지 방법의 차이점을 이해하는 것을 목표로 하세요.

html 코드

코드 복사 코드는 다음과 같습니다.

< ;div class="css">
 

테스트 1

 

테스트 2

먼저 find() 메소드를 살펴보세요

코드 복사 코드는 다음과 같습니다.

$("div").find(".rain" ).css('color' , '#FF0000');
//다음과 동일: $("div .rain").css('color','#ff0000');
//다음과 동일 : $(" .rain","div").css('color','#ff0000');

결과 표시:

질문: 여기서 '테스트 2'가 빨간색으로 바뀌지 않는 이유는 무엇인가요?

find() 메소드 정의: 선택기, jQuery 객체 또는 요소로 필터링된 현재 요소 컬렉션에 있는 각 요소의 하위 항목을 가져오는 것입니다.

find() 메서드에 대한 참고 사항: find() 메서드는 현재 요소 컬렉션 내에서 검색합니다. 나 자신은 포함되지 않습니다.

위의 예에서 $("div")에는 두 개의 요소가 포함되어 있습니다. 첫 번째 요소는 요구 사항을 충족합니다. 그러나 두 번째 요소 div 자체의 클래스는 "rain"이지만 내부에는 class=rain이 없습니다. 그래서 맞지 않습니다.

filter() 메서드를 사용하여 새로운 기능을 살펴보겠습니다

$("div").filter(".rain").css('color', '#FF0000');

결과 표시:

filter() 메서드 정의: filter() 메서드는 일치하는 요소 집합 을 지정된 선택기 의 요소로 축소합니다.

일치하는 요소 집합의 경우 선택기를 사용하여 각 요소 자체(후손이 아님)를 테스트합니다. 선택기와 일치하는 요소는 집합에 포함되고 일치하지 않는 요소는 제거됩니다(선택기가 작동함). 필터로). 새로운 결과 세트를 구성합니다.

위 예에서 find()는 div 요소(하위 항목) 내에서 rain 클래스가 있는 요소를 찾습니다. Filter()는 div에서 클래스가 rain인 요소를 필터링합니다. 하나는 하위 집합에 대해 작업하는 것이고, 다른 하나는 자체 컬렉션의 요소를 필터링하는 것입니다.

filter() 메소드의 두 가지 예를 보면: 예제 1 예제 2

filter() 메서드를 사용하는 두 번째 형태는 선택기 대신 함수를 통해 요소를 필터링하는 것입니다. 각 요소에 대해 함수가 true를 반환하면 해당 요소는 필터링된 컬렉션에 포함되고, 그렇지 않으면 요소가 제외됩니다.

아래 예를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

--------- --- ---------------
웹페이지에서 보낸 메시지
--------- --- --
이제 코드가 클립보드에 있습니다
---------------
확인
- -------------

복사 code 코드는 다음과 같습니다.

$('li').filter(function(index) {
return $('strong', this ).length == 1;
}).css('배경색', '빨간색');

결과는 다음과 같습니다.

그런데 find() 메소드와 children() 메소드의 차이점은 다음과 같습니다

find() 메소드는 위에서 언급되었으므로 여기서는 children() 메소드에 대해 자세히 설명하지 않겠습니다.

어린이, 표면적 의미는 어린이, 어린이, 어린이입니다. 나는 일반적으로 여기에서 자녀 또는 아들로 이해합니다. 왜 이렇게 이해하시나요? 먼저 어린이의 정의를 살펴보겠습니다

children() 메서드 정의: 일치하는 요소 집합의 각 요소에 대해 의 모든 하위 요소 를 가져오는 것입니다. (본인을 제외한 아들세대(1레벨)로만 검색 가능)

find() 메소드 정의: 선택기, jQuery 객체 또는 요소별로 필터링하여 현재 요소 컬렉션에 있는 각 요소의 하위 항목 을 가져오는 것입니다.

제가 이해한 바에 따르면 어린이는 일치하는 세트에 있는 각 요소의 "아들"의 하위 요소입니다. find()에는 아들 세대 외에 손자 세대도 포함됩니다. 즉, 그 후손인 한입니다.

예제를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

Hello< /span>
                                                       

다시

< p class="selected">안녕하세요

<script>$ ("div").children(".selected").css("color", "blue");</script>





결과는 아래와 같습니다.