숨겨진 요소가 존재할 때 n번째 하위 선택기로 행 스타일을 올바르게 지정하는 방법은 무엇입니까?

n번째 하위 선택자를 사용할 때 숨겨진 요소를 우회하는 방법

n번째 하위 선택자를 사용하면 요소 사이의 위치에 따라 요소를 타겟팅할 수 있습니다. 그들의 형제 요소. 그러나 이 선택기는 숨겨진 요소를 계산하므로 그리드의 특정 행을 다르게 표시하려고 할 때 문제가 발생할 수 있습니다.

귀하의 경우 n번째 하위 선택기를 사용하여 n번째 행마다 모양을 변경하고 있습니다. 블록 그리드에서. display: none을 사용하여 일부 블록을 숨기면 n번째 하위 선택기가 여전히 이를 계산하여 잘못된 스타일 지정으로 이어집니다.

CSS 기반 솔루션

안타깝게도 이 문제에 대한 순수한 CSS 솔루션입니다. n번째 자식 선택기는 가시성에 관계없이 단순히 모든 형제 항목을 살펴봅니다.

jQuery 기반 솔루션

n번째 자식 계산에 숨겨진 요소를 포함하지 않으려면, 숨겨져 있으면 DOM에서 제거해야 합니다. jQuery는 이러한 목적으로 .detach() 메소드를 제공합니다.

$(".hide-others").click(function () {
  var divs;

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

  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();
  }
});

이 코드는 "기타 숨기기" 버튼을 클릭할 때 DOM에서 숨겨진 요소를 제거합니다. 버튼을 다시 클릭하면 요소가 원래 순서를 유지하면서 DOM에 다시 삽입됩니다.

데모

다음은 솔루션을 보여주는 데모입니다.

[DEMO FIDDLE]

.detach() 메서드를 사용하면 n번째 하위 선택기 논리를 중단하지 않고 요소의 가시성을 전환하여 그리드의 모든 행이 원하는 모양을 유지하도록 할 수 있습니다.

위 내용은 숨겨진 요소가 존재할 때 n번째 하위 선택기로 행 스타일을 올바르게 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!