jQuery의 매우 유용한 순회 함수 10가지

jQuery를 사용하면 HTML 요소를 쉽게 선택할 수 있습니다 . 그러나 때로는 HTML 구조가 더 복잡할 때 우리가 선택하는 요소를 구체화하는 것이 번거로운 일입니다. 이 튜토리얼에서는 작업할 컬렉션을 개선하고 확장하는 10가지 방법을 살펴보겠습니다.

HTML

먼저 아래의 간단한 페이지를 살펴보고, 이 튜토리얼을 통해 요소를 선택해 보겠습니다.

1. div.container는 래핑 요소입니다.
2. div.photo , div.title 및 div.ating 은 div.container 의 직계 자식 입니다 .
3. 각 div.star는 div.ating 의 하위 항목 입니다 .
4. div.satr 클래스 가 "on" 이면 완전한 sta 입니다 .
5. .
6. 왜 횡단합니까?

   " 왜 일련의 요소를 더욱 구체화해야 합니까? jQuery 선택 구문이 충분히 강력하지 않기 때문입니까? "

   좋아요, 예부터 시작해 보겠습니다. 위에서 언급한 웹페이지에서 별표를 클릭 하면 "on" 클래스를 추가 하고 왼쪽에 각 별표를 추가해야 합니다 . 동시에 모든 별 모양 상위 요소의 배경색을 변경하려고 하므로 코드는 다음과 같습니다.

   두 번째 줄에서는 클릭한 현재 개체를 가져옵니다. 하지만 별 의 부모를 얻는 방법은 무엇입니까 ? 그것이 div.rated 입니다 . 그런데 한 페이지에 div.rated 가 많이 나와 있습니다 . 우리는 어느 것을 원합니까? "this" 왼쪽에 있는 모든 별을 얻는 방법은 무엇입니까 ?

   좋은 소식은 jQuery를 통해 이러한 기본 관계를 기반으로 하는 기존 컬렉션을 기반으로 새로운 요소 컬렉션을 얻을 수 있다는 것입니다. 그리고 이것이 순회 기능이 작동하는 곳입니다.

   1. 어린이

   이 함수는 요소 집합의 직계 자식을 가져옵니다.

   이것은 많은 상황에서 매우 편리할 수 있습니다. 아래 그림을 살펴보십시오.

   1. 처음에는 컨테이너의 모든 별이 선택됩니다.
   2. 선택 표현식을 children() 에 전달하여 선택 결과를 선택한 별표 로 좁힙니다 .
   3. children() 이 매개변수를 허용 하면 모든 직계 하위 항목이 반환됩니다.
   4. 손자 요소는 반환되지 않습니다.
   5. 

   $('.star').click(함수(){

            $(this).addClass('on');

   //        현재 객체의 상위 요소를 선택하는 방법은 무엇입니까 ?

   //        현재 별 의 왼쪽에 있는 모든 별을 가져오는 방법은 무엇입니까 ?

   });