CSS n번째 하위 선택기 계산에서 숨겨진 요소를 제외하는 방법은 무엇입니까?

CSS n번째 하위 선택기에서 숨겨진 요소를 피하는 방법

표시로 요소를 숨길 때: 버튼 클릭을 사용하지 않고, n번째 하위 선택자는 보이는 항목과 숨겨진 항목을 모두 고려합니다. . 이는 다양한 행을 위한 스타일 지정 패턴을 방해할 수 있습니다.

설명:

CSS nth-child() 선택기는 형제 간의 위치를 ​​기준으로 요소를 일치시킵니다. 그러나 display: none을 사용하는 경우에도 숨겨진 요소가 DOM에 남아 있어 잘못된 계산이 발생합니다.

해결책:

n번째 하위 개수에서 숨겨진 요소를 제외하려면 , DOM에서 완전히 제거해야 합니다. 그러나 제거() 메서드를 사용하면 나중에 복원하는 것이 방지되어 토글 기능을 방해하게 됩니다.

대체 접근 방식:

대신 jQuery의 detach() 메서드를 사용하세요. 이벤트 리스너 및 기타 메타데이터를 보존합니다. 방법은 다음과 같습니다.

var divs;

$('.photos-board-item').each(function(i){
    $(this).data('initial-index', i);
});

$('.hide-others').on('click', function () {
    if(divs) {
        $(divs).appendTo('.row').each(function(){
            var oldIndex = $(this).data('initial-index');
            $('.photos-board-item').eq(oldIndex).before(this);
        });
        divs = null;
    } else {
        divs = $('.css--all-photo').detach();
    }
});

설명:

이 코드는 올바른 n번째 하위 개수를 유지하면서 선택한 div의 표시 여부를 전환합니다.

1. 분리된 div를 divs 변수에 저장합니다.
2. divs가 비어 있지 않으면 이전에 클릭한 것입니다. 초기 인덱스 데이터 속성을 기반으로 div를 원래 순서대로 행에 다시 추가합니다.
3. div가 비어 있으면 지정된 div를 분리하고 div에 저장합니다.

이점:

• 숨겨진 요소에도 불구하고 n번째 하위 정확도를 유지합니다.
• 시각적 디자인을 방해하지 않고 가시성을 쉽게 전환할 수 있습니다.
• 아니요 HTML이나 CSS를 변경해야 합니다.

위 내용은 CSS n번째 하위 선택기 계산에서 숨겨진 요소를 제외하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!