jQuery ' s $ .closest () vs $ .parents () 사용

jQuery 's : 자세한 비교 jQuery의 .closest()와 .parents() 메소드 중에서 선택하면 종종 주요 차이를 이해하는 데 달려 있습니다. 이 기사는 그들의 기능을 명확하게하고 실제 사례를 제공합니다.

방법 출발점 검색 방향 반환 값 현재 요소 돔 트리 제로 또는 하나의 요소 부모 요소 돔 트리 0 이상의 요소 (역 순서) 테이블> 핵심 차이는 출발점에 있습니다. 는 현재 요소로 검색을 시작하고

는 직계 부모로 시작합니다. 둘 다 돔 트리를 통해 위쪽으로 가로 지르지 만 첫 번째 일치하는 조상에서 멈추는 반면 .closest()는 뿌리를 계속해서 모든 일치하는 조상을 수집합니다. .parents(). 시각적 표현 : .closest() .parents()

예제

:

를 사용합니다 이 코드는 클릭 된 버튼의 부모 요소를 제거합니다.

참고 메소드는 여러 요소를 반환 할 수 있으므로 메소드가 필요합니다. .parents() 예제 :

를 사용합니다 이것은 동일한 결과를보다 효율적으로 달성합니다 <li>

첫 번째 일치하는 조상을 직접 반환하여

$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).parents('li').first().remove();
});

가 필요하지 않습니다. 이것은 다양한 벤치 마크에서 보여지는 것처럼 종종 성능을 향상시킵니다.

.first() <<> 자주 묻는 질문 (faqs) : <🎜 🎜> .parents()

<<> 주요 차이 : <🎜 🎜> .closest() 현재 요소에서 검색되어 첫 번째 경기에서 중지됩니다. 부모로부터 검색되어 모든 경기를 반환합니다

<<> 여러 요소가 반환되었습니다. <.>는 여러 번 반환 할 수 있습니다

$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).closest('li').remove();
});

선택기없이 사용 :

.closest() 선택기없이 직계 부모를 반환합니다. .first()

특정 조상 찾기 :

두 방법 모두 특정 조상 요소를 대상으로 선택기를 허용합니다. 일치하지 않음 :

둘 다 일치하지 않으면 빈 jQuery 객체를 반환합니다.

<li> 사례 감도 : 선택기는 대소 문자에 민감합니다

체인 : 두 방법 모두 다른 jQuery 방법으로 체인을 허용합니다 .closest() 요약하면, 특정 선택기와 일치하는 가장 가까운 조상을 찾기 위해 .parents()는 일반적으로 효율성과 깨끗한 구문에 선호됩니다. 는 모든 일치하는 조상 요소로 작업해야 할 때 유용합니다. 특정 요구와 코딩 스타일에 가장 적합한 방법을 선택하십시오.

위 내용은 jQuery ' s $ .closest () vs $ .parents () 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!