:nth-child 선택기가 숨겨진 요소를 무시하도록 하려면 어떻게 해야 합니까?

n번째 하위 선택기가 숨겨진 요소를 무시하도록 만드는 방법

문제:

CSS , :nth-child() 선택기는 계산에서 숨겨진 요소를 계산합니다. 이는 디스플레이: 없음을 사용하여 요소를 숨길 때 중단을 일으킬 수 있습니다.

해결책:

숨겨진 요소를 제외하려면 해당 요소를 DOM에서 완전히 제거해야 합니다. 다음은 CSS 기반 솔루션과 jQuery 기반 솔루션입니다.

CSS 솔루션:

.hidden {
    display: none !important;
}

!important 선언은 표시를 재정의합니다. 없음 규칙을 적용하고 완전히 제거합니다. 페이지 레이아웃의 요소.

jQuery 솔루션:

$('.hidden').remove();

remove() 메서드는 DOM에서 숨겨진 요소를 물리적으로 제거하여 해당 요소가 손상되지 않도록 합니다. :nth-child() 선택기로 계산됩니다.

예:

다음 HTML 구조를 고려하세요.

<div class="container">
  <div class="item"></div>
  <div class="item hidden"></div>
  <div class="item"></div>
</div>

nth- child(2n) 선택기의 경우 두 번째 항목이 대상이 됩니다. 그러나 display: none을 사용하여 두 번째 항목을 숨기면 여전히 선택기에 의해 계산됩니다.

제공된 CSS 또는 jQuery 솔루션을 사용하면 숨겨진 요소는 더 이상 n번째 항목에서 고려되지 않습니다. child() 선택기를 사용하여 원하는 효과를 얻을 수 있습니다.

위 내용은 :nth-child 선택기가 숨겨진 요소를 무시하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!