jQuery 선택기 프로젝트 예제 분석 및 구현 code_jquery

우선, jQuery 선택기는 정말 강력합니다!
프로젝트에서 easyui에서 이런 문제가 발생했습니다

사진과 같이 현재 페이지에는 "Original Message Query" 페이지가 표시되는데, 당시 왼쪽 네비게이션 바가 선택되어 있었습니다 . "재전송 메시지 쿼리" 입니다. 오른쪽 메뉴와 왼쪽 탐색을 연결하는 방법: 왼쪽의 "Original Message Query"를 클릭한 다음 오른쪽의 "Reissue Arrival Message"를 확장하고 "Original Message Query", "Backstage" Manage"를 선택합니다. ?
구현 방법은 다음과 같습니다:
1. 오른쪽의 "원본 메시지 쿼리"는 easyui의 탭 컨트롤을 사용하여 탭에 onSelect 메서드가 있는지 확인합니다. onSelect에 있습니다. 메서드에서 수행하려는 작업을 작성하면 됩니다.
2. 트리거 이벤트를 찾았는데, 원하는 효과를 얻으려면 어떻게 해야 하나요?

왼쪽 탐색 모음의 코드 결과는 위와 같습니다. 가장 바깥쪽 레이어는 easyui의 아코디언 컨트롤입니다. 아코디언에는 하나의 패널이 그림 1의 상위 디렉터리에 해당합니다. 예를 들어 "Reissue Arrival Report" 모듈이 있습니다. 패널에는 두 개의 div가 있습니다.
첫 번째 div는 상위 디렉터리이고 두 번째 div에는 많은 하위 디렉터리가 포함되어 있습니다.
먼저 오른쪽의 탭을 선택하면 그에 해당하는 왼쪽의 내비게이션 바가 선택됩니다. 먼저 모든 하위 디렉터리의 선택된 상태를 제거한 다음 현재 하위 디렉터리가 선택되도록 합니다.

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

$('#idaccordion li div') .removeClass( "선택됨");
$('#idaccordionspan:contains("' 제목 '")').parent().parent().addClass("선택됨")

3. 문제는 선택해야 할 항목을 선택했는데, 선택한 하위 메뉴의 상위 메뉴가 확장되지 않는 현상입니다. easyui의 패널에는 확장 방법이 있는데 어떤 패널(상위 메뉴)을 확장해야 하는지 어떻게 알 수 있나요? 그림 2에 표시된 대로 "원본 메시지 쿼리"가 선택되었으며 이제 재발행 도착 보고서의 상위 메뉴를 확장해야 합니다. "원본 메시지 질의"가 위치한 요소 범위의 조상 노드의 형제 노드의 첫 번째 자식 노드는 "교체 도착 보고"가 위치한 노드이다.

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

if( $('#idaccordionspan: 포함(" ' 제목 '")').length > 0 ){
var 아코디언Title = $('#idaccordion 범위:contains("' 제목 '")').closest('.panel-body') .prev( ).find('.panel-title').text();
var p = $('#idaccordion').accordion('getPanel',accordionTitle)
p.panel(' Expand') ;
}

먼저 ID가 idaccordion인 하위 노드에서 텍스트 제목이 포함된 범위를 검색합니다(예: 원본 메시지 query), panel-body 클래스를 사용하여 가장 가까운 조상 노드를 찾은 다음 이 노드의 이전 형제 노드를 찾습니다(예:

), 클래스가 panel-title인 이 노드의 하위 노드를 찾고 이 노드의 텍스트, 즉 "Reissue Arrival Report"를 가져옵니다.
전체 코드는 다음과 같습니다:

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

//오른쪽 탭을 선택하면 왼쪽의 해당 메뉴도 선택되며, 이 메뉴가 위치한 아코디언이 확장되고 다른 아코디언은 닫힙니다
$( '#tabs').tabs({
onSelect :function(title){
$('#idaccordion li div').removeClass("selected");
$('#idaccordion span:contains ("' 제목 '")').parent() .parent().addClass("selected")
if( $('#idaccordionspan:contains("' title '")').length > ; 0 ){
var 아코디언Title = $(' #idaccordionspan:contains("' title '")').closest('.panel-body').prev().find('.panel-title' ).text();
var p = $ ('#idaccordion').accordion('getPanel',accordionTitle)
p.panel('expand')
}
} 🎜>});

가장 가까운 방법은 덜 일반적으로 사용됩니다. 이 방법은 요소의 가장 가까운 부모 요소를 가져올 수도 있습니다.
두 가지 방법의 차이점은 다음과 같습니다. : parents([expr ])
일치하는 모든 요소(루트 요소 제외)의 상위 요소를 포함하는 요소 집합을 가져옵니다. 선택적 표현식으로 필터링할 수 있습니다.
코드는 다음과 같습니다

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

$ ('#items') .parents('.parent1')
closest([expr])


closest는 먼저 현재 요소가 일치하는지 확인하고 일치하면 요소 자체를 직접 반환합니다. 일치하는 항목이 없으면 선택기와 일치하는 요소를 찾을 때까지 레이어별로 상위 요소를 위쪽으로 검색합니다. 아무것도 발견되지 않으면 빈 jQuery 객체가 반환됩니다.

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

$('#items1').closest ('.parent1')

가장 가까운 요소와 상위 요소의 주요 차이점은 다음과 같습니다. 1. 전자는 현재 요소에서 일치 및 검색을 시작하고, 후자는 상위 요소에서 일치 및 검색을 시작합니다. 2. 전자는 요소를 찾을 때까지 위쪽으로 검색합니다. 후자는 루트 요소까지 위쪽으로 검색한 다음 이러한 요소를 임시 컬렉션에 넣은 다음 지정된 선택기 표현식을 사용하여 필터링합니다. 전자는 0개 또는 1개의 요소를 반환하고, 후자는 0, 1개 이상의 요소를 포함할 수 있습니다.
closest는 이벤트 위임을 처리하는 데 유용합니다.