JQuery 학습 노트 N-child 사용

JQuery 를 사용 할 때 어떤 용기(예 를 들 어 div 나 table 의 일부 하위 요소)를 찾 으 려 면 find 방법 을 사용 하기 쉽다.find 는 조건 에 맞 는 모든 하위 요 소 를 반복 적 으로 찾 고 css 등 내용 을 통일 적 으로 설정 할 수 있 습 니 다.예 를 들 어 이러한 table:

 
<table id="outer"> 
<tr> 
<td> 
<table id="nested"> 
<tr> 
<td> 
  Table， 1 1 
</td> 
<td> 
  Table， 1 2 
</td> 
</tr> 
<tr> 
<td> 
  Table， 2 1 
</td> 
<td> 
  Table， 2 2 
</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
   Table， 2 1 
</td> 
<td> 
   Table， 2 2 
</td> 
</tr> 
</table> 

현재 모든 글꼴 을 파란색 으로 설정 하고 직접 이렇게 하면 됩 니 다.$(")table").css("color", "blue"); 메모:$("table")는 페이지 의"모든 table"을 이렇게 설정 합 니 다.다음은 복잡 한 예 를 보 겠 습 니 다.큰 성 과 를 거 둘 수 있 습 니 다.당신 이 결 과 를 실행 하면 깜짝 놀 랄 것 입 니 다."테이블 이 내장 되 어 있 기 때문에 1 열 1"이 빨간색 으로 변 했 습 니 다!이것 은 근본적으로 우리 가 예상 한 결과 가 아니다.왜 일 까요?이 치 는 간단 하 다―JQuery 가 html 태그 나 다른 관련 속성 을 빈 칸 으로 나 누 면'부모 태그'에서 탭 을 하나씩 찾 아 조건 을 만족 시 킬 때 까지 하 는 것 을 의미 하기 때문이다.결 과 는"아버지 table 에서 모든 tr 를 찾 아 조건 을 만족 시 키 는 두 번 째 tr 를 찾 아 두 번 째 tr 중의 첫 번 째 td 를 찾 아 빨간색 으로 염색 합 니 다!"다음은 완전한 정 의 를 내 립 니 다.-$("HTML 태그,html 하위 태그:eq(n)html 하위 태그:eq(n)...):HTML 태그(아버지)에서 조건 을 만족 시 키 는 n+1 하위 태 그 를 찾 은 다음 n+1 하위 태그 에서 n+1 하위 태 그 를 찾 습 니 다.그래서 이런 방법 은 잘못된 것 이 고 초보 자 들 은 특히 범 하기 쉽다.그럼 어떻게 해 야 되 지?누군가가 이 방법 을 생각 해 냈 다

 
$("table").each(function () { 
$(this).find("tr:eq(1) td:eq(1)").css("color", "red"); 
}); 

그의 이 유 는 모든 table 을 옮 겨 다 니 고 모든 table 의 두 번 째 줄 두 번 째 열 에 색 을 설정 하 는 것 이다.첫 번 째 답 에 비해 두 번 째 사람 은 조금 똑똑 한 것 같 았 다.그 는'table'아버지 라벨 을 스스로 반복 해서 찾 지 않 는 다 는 것 을 깨 달 았 다.따라서 each―물론 each 로 깊이 있 게 table 을 옮 겨 다 니 는 문 제 를 해결 했다 고 생각 합 니 다.그러나 첫 번 째 table 의 find 는 파란색 부분 에서 실 행 됩 니 다(여전히 아버지 table 의 두 번 째 tr,두 번 째 tr 중의 두 번 째 td 를 찾 습 니 다).그래서 find 도 마지막 HTML 만 깊이 있 게 옮 겨 다 닙 니 다.이 때 우 리 는 이러한 방법 만 사용 할 수 있 습 니 다.$("tr:nth-child(2)td:nth-child(2)").css("color","red");nth-child(n)는 CSS 위조 류 의 한 방법 으로 JQuery 에 사용 할 수 있 습 니 다.이 코드 는 n 번 째 tr 에서 가장 가 까 운 용기 요 소 를 찾 아 자신 을 설정 하 는 것 입 니 다.이렇게 되면'tr:nth-child(2)'는 각각 두 개의에 대응 합 니 다.스타일 을 설정 할 수 있 습 니 다.