jQuery를 사용하여 중첩 된 아동 요소를 찾고 '더 많은 표시'기능을 구현하십시오.

이 기사는 jQuery를 사용하여 더 많은 기능을 구현할 때 다층 HTML 구조에 중첩 된 대상 어린이 요소를 정확하게 찾는 방법을 다루는 것을 목표로합니다. 우리는 컨텐츠를 확장하고 닫기 위해 DOM Traversal을 통해 대상 요소를 효과적으로 찾아서 운영하는 방법을 살펴 봅니다. 이 기사는 개발자가 이러한 기술을 이해하고 적용 할 수 있도록 자세한 코드 예제 및 단계 지침을 제공합니다.

웹 개발에서는 종종 컨텐츠를 동적으로 표시하거나 숨겨야하는 상황이 발생합니다. "More Show"기능이 일반적인 예입니다. 이 튜토리얼은 jQuery를 사용 하여이 기능을 구현하고 HTML 구조가 복잡 할 때 작동 해야하는 하위 요소를 정확하게 찾는 방법을 해결하는 방법에 중점을 둘 것입니다.

중첩 된 아동 요소를 포지셔닝하기위한 전략

대상 요소가 직접 형제 노드가 아니라 더 깊은 DOM 구조에 중첩 될 때 이전 () 또는 다음 () 메소드를 사용하면 직접 작동하지 않을 수 있습니다. 현재 DOM Traversal 메소드를 사용하여 이벤트를 트리거하는 요소에서 시작하여 대상 요소가 발견 될 때까지 위 또는 아래로 검색해야합니다.

일반적인 방법은 다음과 같습니다.

• ParentNode : 현재 노드의 상위 노드를 얻는 데 사용됩니다. ParentNode를 여러 번 사용하여 DOM 트리를 위쪽으로 이동할 수 있습니다.
• 가장 가까운 () : 현재 요소에서 시작하여 선택기와 일치하는 첫 번째 조상 요소를 찾으십시오.
• 찾기 () : 현재 요소의 후손들 사이에서 선택기와 일치하는 요소를 찾으십시오.
• QuerySelector () : CSS 선택기를 사용하여 지정된 요소 범위 내에서 첫 번째 일치 요소를 찾으십시오. 이것은 jQuery 객체와 함께 사용할 수있는 기본 JavaScript 방법입니다.

예 : ParentNode 및 QuerySelector를 사용하여 "더보기 표시"를 구현하십시오.

다음과 같은 HTML 구조가 있다고 가정합니다.

 <div class="Text-Container">
  <h1> 제목은 여기에 </h1>입니다
  <h2> 자막 </h2>
  <div class="래퍼">
    <div class="Content HideContent">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamond nonumy eirmod temp는 ut labore et dolore magna aliquyam erat, sed 다이아몬드 voluptua를 포함합니다.
      Vero Eos et Accusam et at just duo dolores et e e rebum. Stet Clita Kasd Gubergren, Sea Takimata Sanctus Est Lorem Ipsum Dolor Sit Amet.
      <p> 더 많은 텍스트 </p>
      <ul>
        <li> 더 많은 텍스트 </li>
        <li> 더 많은 텍스트 </li>
        <li> 더 많은 텍스트 </li>
      </ul>
    </div>
  </div>
  <div class="show-more">
    <a href="#"> 더 많이 표시 </a>
  </div>
</div>

우리의 목표는 "more show"링크를 클릭 할 때 .content 요소의 디스플레이 상태를 전환하는 것입니다.

jQuery를 사용하여이를 구현하는 코드는 다음과 같습니다.

 $ ( ". show-more a"). on ( "click", function () {
  let div = this.parentNode.parentNode.querySelector ( '. content');
  classes = [ 'showcontent', 'hidecontent'];

  if (div.classlist.contains (classe [0]) {
    Div.ClassList.replace (클래스 [0], 클래스 [1]);
  } 또 다른 {
    Div.ClassList.replace (클래스 [1], 클래스 [0]);
  }

  this.textContent = this.textContent == 'more show'? 'show less': '더 많은 쇼';
});

이 코드는 먼저 클릭 된 요소를 찾은 다음 parentnode.parentNode를 사용하여 두 레이어를 통해 위쪽으로 반복하여 .Text-Container 요소에 도달합니다. 다음으로 QuerySelector ( '. Content')를 사용하여 .Text-Container 요소 내에서 .Content 요소를 찾으십시오. 마지막으로 .Content 요소의 현재 클래스에 따르면 디스플레이 상태를 전환하고 연결된 텍스트를 업데이트하십시오.

동시에 .ShowContent 및 .HideContent의 CSS 스타일을 정의해야합니다.

 .ShowContent {
  디스플레이 : 블록;
}

.HideContent {
  디스플레이 : 없음;
}

코드 설명 :

1. $ ( ". show-more a"). on ( "click", function () {...}); : 쇼가 더 많은 요소 아래의 모든 A 태그에 대한 클릭 이벤트를 바인딩합니다.
2. let div = this.parentNode.parentNode.querySelector ( '. content'); : .Content 요소를 얻습니다. 이것은 클릭 된 태그를 가리 킵니다. 이 .parentNode는 .show-more 요소를 가져옵니다. this.parentNode.parentNode는 .Text-Container 요소를 가져옵니다. QuerySelector ( '. Content')는 .Text-Container 요소 내에서 클래스가있는 요소를 찾습니다.
3. classes = [ 'showcontent', 'hidecontent']; : 후속 클래스 스위칭을 용이하게하기 위해 Showcontent 및 HideContent가 포함 된 배열을 정의하십시오.
4. if (div.classList.contains (class [0])) {...} else {...} : .Content 요소에 ShowContent 클래스가 포함되어 있는지 확인하십시오. 포함 된 경우, HideContent로 교체하고 그렇지 않으면 ShowContent로 교체하십시오.
5. this.textContent = this.textContent == 'more show'? 'show less': '더 많은 쇼'; : 링크의 현재 텍스트를 기반으로 "Show Less Show"또는 "More 표시"로 전환하십시오.

주목해야 할 것

• jQuery 라이브러리가 제대로 도입되었는지 확인하십시오.
• DOM 구조를 이해하는 것은 대상 요소를 정확하게 찾는 열쇠입니다. DOM 트리는 브라우저의 개발자 도구를 사용하여 점검 할 수 있습니다.
• QuerySelector ()는 일반적으로 jQuery의 선택기보다 더 나은 성능을 발휘하는 기본 JavaScript 메소드입니다. jQuery의 다른 기능을 사용할 필요가 없으면 QuerySelector ()를 사용하는 것을 고려할 수 있습니다.
• 복잡한 HTML 구조에서는 부모 노드를 과도하게 사용하면 코드를 유지하기가 어렵습니다. 코드의 가독성을 향상시키기 위해 가장 가까운 () 또는 find () 메소드를 사용하는 것을 고려하십시오.

요약

이 튜토리얼은 jQuery를 사용하여 중첩 된 어린이 요소를 찾고 "더 많은 표시"기능을 구현하는 방법에 대해 설명합니다. DOM Traversal 방법을 유연하게 사용하여 복잡한 HTML 구조를 쉽게 조작하고 다양한 동적 효과를 달성 할 수 있습니다. 실제 개발에서 가장 적합한 위치를 포지셔닝 요소 방법은 특정 HTML 구조를 기반으로 선택해야하며 코드의 가독성과 유지 관리에주의를 기울여야합니다.

위 내용은 jQuery를 사용하여 중첩 된 아동 요소를 찾고 '더 많은 표시'기능을 구현하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!