JQuery.closest(),parent(),parents()부모 node_jquery 찾기

HTML 코드, 테스트 주소: jQuery 순회 - 가장 가까운() 메서드

------코드를 붙여넣으면 페이지에서 자동으로 숨겨집니다(표시됩니다)! 무슨 일인지 가르쳐 줄 사람 있나요?
1. 항목-1을 통해 3급 찾기(직속 상사 찾기)

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

$('li.item-1').closest('ul')
$('li.item-1').parent()
$(' li.item- 1').parents().eq(0)

2. item-1을 통해 level-2 찾기(선택기를 통해 상위 요소 찾기)

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

$('li.item-1').closest('. level-2')
//$('li.item-1').parent('.level-2') //찾을 수 없습니다. parent() 메소드는 이전 레벨로만 이동합니다!
$('li.item-1').parent().parent() //너무 이상해요!
$('li.item-1').parents('.level-2')

부모(선택자)에서 선택자 사용

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

$('li').parent() //return level-3, level- 2 및 레벨 -1 컬렉션은 모두 li의 상위 요소입니다
$('li').parent('.level-3') //위 컬렉션에서 레벨 3을 필터링합니다

3.가장 가까운 메소드는 현재 요소에서 탐색을 시작하고 parent()는 상위 요소에서 시작합니다!
$('li.item-1').closest('li') //항목 1을 반환합니다. 사용 시 주의하시기 바랍니다. 선택기.
4. closet(selector,context)에서 context 매개변수의 사용법 context 매개변수가 없으면 현재 요소부터 끝까지 순회함
컨텍스트 매개변수를 사용하면 쿼리 효율성이 향상될 수 있습니다!

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

var listItemII = document.getElementById('ii '); //Item-II
//var listItemII=$('#ii'), 작동하지 않아서 오랫동안 혼란스러웠습니다!
$('li.item-1').closest('ul', listItemII).css('Background-color', 'red')
//결과는 item-의 상위 항목이어야 합니다. 1 ul 요소, itemII의 하위 요소,
$('li.item-1').closest('#one', listItemII).css('Background-color', 'green')
// item-1 중 id=1인 요소는 itemII의 하위 요소여야 합니다.

5. 컨텍스트 매개변수 분석을 찾을 수 없습니다

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

closest: function( selectors, context ) {
var ret = [], i, l, cur = this[0 ];
// String
var pos = POS.test( selectors ) || typeof selectors !== "string" ?
jQuery( 선택기, 컨텍스트 || this. context ) :
0 ;
for ( i = 0, l = this.length; i cur = this[i]
while ( cur ); 🎜>if ( pos ? pos .index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
//일치하는 요소가 발견되면 반환 값 컬렉션에 추가하세요! 다음 요소 검색으로 이동
ret.push( cur );
break;
} else {
cur = cur.parentNode
//DOM 트리를 탐색하여 일치 the selector
//위 과정에서 상위노드가 존재하지 않는다면, 루트노드가 존재하지 않거나, 컨텍스트 노드를 찾은 것(지정된 위치에 도달한 것)!
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
break
}
}
}
}
ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
return this.pushStack( ret, "closest", selectors );
저는 JQuery 소스코드에 대해 잘 몰라서 일부 자세한 설명은 생략하겠습니다!
closed()의 정의를 보면 context와 비교했을 때 cur=this[i] 변수는 DOM 객체이고, $('#ii') 메소드는 JQuery 객체를 얻어서 전달된다는 것을 알 수 있습니다. (selector, context) 메소드의 context 매개변수는 DOM 메소드를 통해 얻어야 합니다.
jQuery 객체와 DOM 객체의 변환?
1. 객체 가져오기(변수 이름 앞에 $를 추가하는 목적은 JQuery와 DOM 변수를 구별하기 위함):
jQuery 객체 가져오기: var $variable=jQuery object; var 변수=DOM 개체;
2.jQuery 개체를 DOM 개체로:
배열을 사용하여 변환 var cr=$("#cr")[0]
get(index) 메서드를 사용하여 var 변환 cr=$("#cr") .get(0);
3. DOM 개체를 jQuery 개체로 변환:

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

var cr=document.getElementsById("cr") //DOM 객체 가져오기
var $cr=$(cr);// jQuery 객체로 변환

SO
$('li.item-1').closest('#one', $('#ii').get(0)) //이렇게
를 사용하거나 소스 코드에 "cur=를 넣습니다. ==context"의 판단이 "$(cur)====$(current)"로 변경되어 두 사용법이 호환될 수 있습니다. !
물론 소스코드를 수정하는 것은 좋은 제안은 아니지만 JQuery 자체는 왜 이 방법을 사용하지 않는지... 조언 부탁드립니다! ! !