jQuery 트리 구조 selector_jquery

DOM 구조는 실제로 트리 구조입니다. jQuery에서 제공하는 트리 선택기를 사용하여 DOM 트리에서 노드를 선택할 수 있습니다. 이러한 트리 선택기의 메서드에는 children(), parent(), parent(), next(), prev(), siblings()가 포함됩니다.
요소의 "자식" 선택 - children()

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

>< ;li id="son1">첫 번째 열

• 두 번째 열


• 세 번째 열

$("#parent").children().length //모든 "자식" 수 가져오기(li), "3 ”
$("#parent").children("#son1").text(); //첫 번째 "자식"(li) 값 가져오기 - "첫 번째 열"

선택 요소의 "상위" - parent()

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

• 첫 번째 열
  
• >
• 세 번째 열

$("#son1").parent().attr ("id");/ /ul의 ID 가져오기 - "parent"

특정 요소의 "조상" 선택 -parents() (참고:

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

🎜>

• 첫 번째 열


• 두 번째 열
• 세 번째 열

$("#son2 ").parents() .each(function(i){
if(ialert($(this).html());
})


요소의 "동생" 선택 - next()

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

첫 번째 열

세 번째 열

$("#son2" ).next().text (); //요소의 "형제"를 선택하려면 #son3을 선택하세요.


prev()

코드 복사

코드는 다음과 같습니다.

• 첫 번째 열< ;/li>

두 번째 열

세 번째 열

< ;/ul> ("#son2").prev().text(); //요소의 "brothers"를 선택하려면 #son1을 선택하세요.


siblings()

코드 복사

코드는 다음과 같습니다.

< ;li id= "son1">첫 번째 열
• 두 번째 열

세 번째 열

$("#son2").siblings().text() //#son1 및 #son3 선택

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.