n번째 자식 선택기가 그리드 레이아웃의 숨겨진 요소를 무시하도록 만드는 방법은 무엇입니까?

n번째 하위 선택기에서 숨겨진 DIV 건너뛰기

문제:

n번째 하위 선택기를 사용할 때 - 그리드 레이아웃의 요소 스타일을 지정하는 하위 선택기, 숨겨진 요소는 여전히 형제로 계산되어 원하는 스타일 지정을 방해합니다.

순수한 CSS 솔루션(불가능):

n번째 자식 선택기는 가시성에 관계없이 모든 형제 항목을 고려하므로 CSS만 사용하여 숨겨진 요소를 무시하는 것은 불가능합니다.

jQuery 솔루션:

이 문제를 해결하려면 , 우리는 jQuery를 사용하여 DOM에서 숨겨진 요소를 제거하고 n번째 하위 선택기의 개수에서 해당 요소를 효과적으로 "제외"할 수 있습니다. 수정된 코드는 다음과 같습니다.

<br>var divs;</p>
<p>$('.photos-board-item').each(function(i){</p>
<pre class="brush:php;toolbar:false">$(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();
}

});
< ;/pre>

설명:

• 페이지 로드 시 각 항목에 초기 색인이 제공됩니다.

• "다른 항목 숨기기" 버튼을 클릭한 경우:

  • 숨겨진 div가 있으면 그리드에 다시 첨부됩니다.
  • 숨겨진 div가 없으면 클래스가 "css"인 요소 --all-photo"는 그리드에서 분리되어 DOM 및 n번째 하위 항목 계산에서 제외됩니다.

이 jQuery 기반 접근 방식을 사용하면 n번째 하위 선택기가 보이는 형제만 계산하여 숨겨진 div 또는 div 수에 관계없이 원하는 그리드 스타일을 보장합니다.

위 내용은 n번째 자식 선택기가 그리드 레이아웃의 숨겨진 요소를 무시하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!