JQuery 연구 노트 nt-child_jquery 사용

JQuery를 사용할 때 컨테이너(예: div 또는 테이블의 일부 하위 요소)를 찾으려면 find 메서드를 사용하는 것이 쉽습니다. find는 반복을 사용하여 조건을 충족하는 모든 하위 요소를 찾고 CSS 및 기타 콘텐츠를 균일하고 일괄적으로 설정할 수 있습니다.
예를 들어 다음과 같은 테이블이 있습니다.

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

🎜>

인라인 테이블, 행 1, 열 1	인라인 테이블, 행 1, 열 2
인라인 테이블, 2행, 1열	🎜>인라인 테이블, 2열
첫 번째 테이블, 행 2, 열 1	< /td>

이제 모든 글꼴을 파란색으로 설정해야 합니다.
$("table").css("color", "blue");
참고: $("table")은 페이지의 "모든 테이블"이 이와 같이 설정되었음을 의미합니다.

아래의 복잡한 예를 보세요 -
[각 테이블의 두 번째 행과 두 번째 열의 글꼴을 빨간색으로 설정]

아마도 이렇게 생각할 수도 있습니다. 왜냐하면 $(" table")은 "각 테이블"을 의미하므로 "$(table tr:eq(1) td:eq(1)).css("color","red"); 그리고 테이블의 두 번째 열)...
정말 그런가요? 결과를 실행해 보면 "Inline Table, row 1 columns 1"만 빨간색으로 바뀌기 때문에 우리가 예상했던 결과가 아니네요! .
이유는 간단합니다. JQuery가 html 태그나 기타 관련 속성을 공백으로 구분하면 조건이 충족될 때까지 자체 태그를 하나씩 검색한다는 의미이기 때문입니다. ​부모 테이블에서 조건에 맞는 두 번째 tr을 찾은 다음 두 번째 tr에서 첫 번째 td를 찾아 빨간색으로 염색하세요!" ”
완전한 정의는 아래에 나와 있습니다.
$("HTML 태그, html 하위 태그: eq(n) html 하위 하위 태그: eq(n)...): HTML 태그에서 (상위) 조건을 충족하는 n 번째 하위 태그를 찾은 다음 n 번째 하위 태그에서 n 번째 하위 태그를 모두 탐색할 때까지 검색합니다.
그래서 이 방법은 특히 초보자에게는 잘못된 방법입니다.

그럼 어떻게 해야 할까요? 누군가 이 방법을 생각해냈습니다 -




코드 복사


코드는 다음과 같습니다.


$(" 테이블" ).each(함수 () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");

}) ; 각 테이블을 순회한 후 각 테이블의 두 번째 행과 두 번째 열의 색상을 설정하는 것입니다. 첫 번째 답변과 비교하면 두 번째 사람이 조금 더 똑똑한 것 같습니다. 그는 "table" 상위 태그가 자체적으로 반복적으로 검색되지 않는다는 것을 깨달았습니다(JQuery는 테이블을 설정할 때 가장 안쪽 태그만 깊이 탐색합니다). 태그, 즉 파란색으로 정의된 "..."의 무한 부분입니다. 그래서 나는 각각을 사용하는 것을 생각했습니다. 물론 각각은 테이블을 깊이 탐색하는 문제를 해결하지만 첫 번째 테이블의 찾기는 여전히 파란색 부분에 따라 실행됩니다(여전히 상위 테이블에서 두 번째 tr을 찾고 두 번째 테이블은 두 번째 tr의 tr입니다. 두 번째 td)이므로 find는 마지막 HTML의 심층 탐색만 수행합니다.

현재 다음 방법만 사용할 수 있습니다:

$("tr:nth-child(2) td:nth-child(2)").css("color", "red" );

nth-child(n)은 JQuery에서 사용할 수 있는 CSS 의사 클래스의 메서드입니다. 이 코드의 의미는 n번째 tr에 가장 가까운 컨테이너 요소를 찾아 설정한다는 것입니다. .
이런 방식으로 "tr:nth-child(2)"는 각각 두 개의 에 해당합니다. 그래서 스타일을 설정할 수 있습니다.