>웹 프론트엔드 >JS 튜토리얼 >jQuery는 요소의 계층 구조 경로를 얻습니다

jQuery는 요소의 계층 구조 경로를 얻습니다

William Shakespeare
William Shakespeare원래의
2025-03-08 00:13:10540검색

이 jQuery 함수는 DOM 트리 내의 요소의 계층 적 경로를 검색합니다. 뿌리에 도달 할 때까지 부모 요소를 가로 지르십시오.

.

핵심 기능은 jQuery Get Hierarchy Path of Element 메소드 내에서 캡슐화되며 jQuery 객체 프로토 타입으로 확장됩니다. 함수는 특정 조건이 충족 될 때까지 상위 요소에서 재귀 적으로 호출됩니다.

이 개선 된 버전은 잠재적 인 문제를 다룹니다 getPath 명확한 변수 이름 :

더 설명적인 변수 이름 (/* jQuery function to get the hierarchical path of an element */ jQuery.fn.extend({ getPath: function(path) { if (typeof path === 'undefined') path = ''; // Initialize path if undefined let currentElementName = this.get(0).nodeName.toLowerCase(); let id = this.attr('id'); // Add ID to path if available, handling the special case of an element with id 'browser' if (typeof id !== 'undefined') { if (id === 'browser') { return path; // Stop recursion if id is 'browser' } else { path = `${currentElementName}#${id} ` + path; // Add id to path } } else { path = `${currentElementName} ` + path; // Add element name to path } // Recursive call to parent element return this.parent().length ? this.parent().getPath(path) : path.trim(); // Return trimmed path if parent doesn't exist } });)을 사용합니다.

오류 처리 :

재귀 호출 전에
    를 사용하여 부모 요소의 존재를 명시 적으로 점검하여 요소가 이미 루트에 있으면 오류를 방지합니다. 경로 구조 :
  • 더 강력한 경로 구조, ID없이 요소의 올바른 간격 및 취급 보장. 경로 트리밍 : currentElementName. 제거 불필요한 HTML 확인 : cur 원래 코드는 혼란 스러웠으며
  • 제거 된 .length.
  • 이 개정 된 기능은 jQuery 컨텍스트 내에서 임의의 요소의 계층 적 경로를 얻는보다 신뢰할 수 있고 효율적인 방법을 제공합니다.

위 내용은 jQuery는 요소의 계층 구조 경로를 얻습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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