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

3. 가장 가까운 요소는 0 또는 1개 요소를 반환하며, 상위 요소는 0개, 1개 또는 여러 요소를 포함할 수 있습니다.

코드는 다음과 같이 작성할 수 있습니다.

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

JQUERY 형제 노드 가져오기

JQuery 형제 노드 획득, 우리의 아이디어는 현재 노드를 통해 상위 노드를 찾은 다음 상위 노드를 통해 하위 노드를 찾는 것입니다. 코드는 다음과 같습니다

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

또 다른 방법은 siblings() 함수를 사용하는 방법이며, 코드는 다음과 같습니다

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

JQUERY 하위 노드 가져오기

첫 번째 하위 요소와 일치합니다. 먼저 하나의 요소만 일치하며 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.

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

선택기를 통해 가져오면 코드는 다음과 같습니다.

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

find()함수를 이용하면 위에서 언급한 것처럼 사용법은 동일합니다

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

children() 함수를 사용하면 코드는 다음과 같습니다

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

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자들은 이 사이트에서 특별한 주제를 확인할 수 있습니다: "

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

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.