jQuery_jquery를 사용하여 상위 요소 노드, 하위 요소 노드 및 형제 요소 노드를 얻는 방법

이 기사의 예에서는 jQuery가 상위 요소 노드, 하위 요소 노드 및 형제 요소 노드를 획득하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

먼저 이 HTML 코드를 살펴보겠습니다. 노드(아버지, 아들, 형제 등)를 가져오는 전체 방법은 다음 코드를 기반으로 합니다.

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

JQUERY 상위 노드 획득:

부모 노드, 자식 노드 및 형제 노드를 찾는 데 도움이 될 수 있는 parent(), parent(), close(), find, first-child 등 jquery에서 부모 요소를 가져오는 여러 가지 방법이 있습니다.

예를 들어 parent()를 사용하여 상위 노드를 가져옵니다

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

다음에는 parent() 메소드와 Nearest() 메소드의 차이점에 대해 주로 이야기하겠습니다

1. 가장 가까운 요소는 현재 요소부터 일치 및 검색을 시작하고, 부모는 상위 요소부터 일치 및 검색을 시작합니다

2. Closest는 일치하는 요소를 찾을 때까지 단계별로 위쪽으로 검색한 다음 중지합니다. 상위 요소는 루트 요소까지 위쪽으로 검색한 다음 이러한 요소를 임시 컬렉션에 넣은 다음 지정된 선택기 표현식을 사용하여 필터링합니다.

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

JQUERY 형제 노드 가져오기

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

$(".title").siblings('ul');
//找到自己的兄弟节点ul

JQUERY 하위 노드 가져오기

$(".par:first-child");
//取得id为firstli的节点

$('#firstli h3.title');
//取得条目一的h3

$("#firstli").find("h3");
//找到子兄弟节点h3

$("#firstli").children("h3.title");
//取得子节点h3、class为title 

JQuery 순회 알고리즘 및 기술 요약", "jQuery 테이블(테이블) 작업 기술 요약 " , "jQuery 드래그 효과 및 기법 요약", "jQuery 확장 기법 요약", "jQuery 공통 클래식 특수 효과 요약" , "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 일반 플러그인 및 사용 요약"