jQuery 필터 children() 사례에 대한 자세한 설명(그림 및 텍스트)_jquery

jQuery의 선택에는 두 가지 유형이 포함됩니다. 하나는 선택기이고 다른 하나는 필터입니다. 필터는 선택기에 의해 선택된 jQuery 객체를 추가로 선택하는 데 사용됩니다.

children()은 이름에서 알 수 있듯이 어린이를 필터링하고, 조건에 맞는 어린이를 필터링하는 필터입니다.

전체 형식은 다음과 같습니다.

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

.children(expr )

여기서 children은 필터 이름이고 expr은 표현식입니다. 선택기의 모든 표현식은 태그 이름 "div", 클래스별로 여기에서 사용할 수 있습니다. 이름 ".class" ", 일련 번호 ":first" 등입니다. 표현식이 비어 있으면 모든 하위 항목이 반환되고 반환된 결과는 여전히 jQuery 객체입니다. 예:

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

>

좋아하실 수도 있습니다.

;

• 헤드 앤 숄더 샴푸


• 리우셴 토일렛 워터


• 세이프가드 비누
  
• ;Xin Xiang 프린트 티슈


• 와하하 미네랄 워터
/ div>



인기 추천


롱시 올리브 오일


Pampers 기저귀

유기농 쌀


Miaojie 쓰레기 봉투
유레메이 밀크티



;

코드 복사

코드는 다음과 같습니다.

요구 사항 1: 모든 div 하위 항목의 글꼴 색상을 빨간색으로 변경

코드 복사

코드는 다음과 같습니다.

$("div").children().css("color","red");//all 텍스트가 빨간색으로 바뀌었습니다

요구 사항 2: 모든 div의 하위 항목에 있는 h2 태그의 글꼴 색상을 빨간색으로 변경

코드 복사

코드는 다음과 같습니다.

$("div").children("h2").css("color","red");//모든 h2 제목 텍스트가 빨간색으로 변합니다

요구사항 3: 모든 div의 하위 항목에 있는 li 태그의 글꼴 색상을 빨간색으로 변경하세요.

코드를 복사하세요.

코드는 다음과 같습니다:

$("div").children("li").css("color","red");//실패했습니다!

왜 성공하지 못했나요? 자식은 손자가 아닌 자식만 찾을 수 있고 div의 자식은 h2와 ul이므로 li를 찾을 수 없기 때문입니다

그럼 아이들을 통해 리를 찾으려면 먼저 리의 아버지 ul을 선택해야 합니다

코드 복사

코드

$("div ul").children("li").css("color","red");//모든 li 텍스트가 빨간색으로 변합니다
$("div ul")은 계단식 선택기입니다. 이는 div 아래의 ul을 선택한다는 의미입니다. 여기서는 자세히 설명하지 않습니다.

요구사항 4: ul의 두 번째 자식 글꼴 색상을 빨간색으로 변경

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

$("div ul").children(":eq(1)").css("color","red");//어느 것인지 맞춰보세요 좋아해요 "Liu Shen Floral Water"의 두 번째 라인이 빨간색으로 변합니다

둘째 아이가 빨갛게 변하길 원한다면 왜 eq(1)인가요? 시퀀스 번호는 0부터 시작하므로 첫 번째 자식의 시퀀스 번호는 0이므로 두 번째 자식의 시퀀스 번호는 1입니다.

자세히 살펴보면 '좋아요' 모듈의 두 번째 줄만 변경되고 '인기 추천'의 두 번째 줄은 변경되지 않은 이유는 무엇인가요? children 필터로 걸러진 아이들은 함께 정렬되기 때문에 "인기 추천"의 두 번째 줄은 Old 7이 됩니다. 빨간색으로 만들고 싶다면

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

$("div ul").children(":eq(1),:eq(7) ") .css("color","red");//두 번째 줄이 마음에 드는지 맞춰보세요, 인기 추천 두 번째 줄이 빨간색으로 변합니다

두 줄 모두 빨간색으로 변합니다]

요약: children은 현재 jQuery 객체의 하위 항목을 찾는 필터입니다. children(expr)의 expr은 표현식이 추가된 후 expr과 일치하는 하위 항목만 유지됩니다. 아니요, 일치하는 사람은 죽습니다. 자녀는 자녀만 찾을 수 있습니다. 손자와 증손자를 찾으려면 찾기 필터를 사용해야 합니다.