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

n번째 하위 선택기를 사용할 때 숨겨진 요소를 무시하는 방법

원래 쿼리에 설명된 시나리오에서 숨겨진 요소가 문제를 일으키는 경우 n번째 자식 선택자를 사용하는 경우 문제를 해결하기 위한 두 가지 주요 접근 방식이 있습니다:

1. DOM에서 숨겨진 요소 제외

jQuery를 사용하면 .remove() 메서드를 사용하여 DOM에서 숨겨진 요소를 완전히 제거할 수 있습니다. 이렇게 하면 n번째 자식 선택자에서 더 이상 형제로 간주되지 않습니다. 그러나 나중에 숨겨진 요소를 복원하려는 경우에는 이 접근 방식이 적합하지 않습니다.

2. jQuery의 detach() 메서드 사용

jQuery의 .detach() 메서드는 DOM에서 숨겨진 요소를 분리하지만 .remove()와 달리 요소의 jQuery 데이터를 유지합니다. 이렇게 하면 나중에 데이터 손실 없이 분리된 요소를 다시 삽입할 수 있습니다.

업데이트된 jQuery 코드:

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

설명:

• 이 코드는 .photos-board-item 요소를 반복하고 각 요소에 초기 인덱스가 있는 데이터 속성을 할당합니다.
• 숨기기 버튼을 클릭하면 요소에 요소가 있는지 확인합니다. 분리되었습니다. 그렇다면 초기 인덱스에 따라 DOM에 다시 삽입합니다.
• 분리된 요소가 없으면 .css--all-photo 요소를 분리하고 divs 변수에 할당합니다.

참고:

• n번째 하위 CSS 규칙은 동일하게 유지됩니다.
• 숨겨진 요소는 n번째에서 효과적으로 제외됩니다. -하위 선택 프로세스를 통해 원하는 시각적 효과를 얻을 수 있습니다.
• 분리된 요소는 나중에 시각적 레이아웃에 영향을 주지 않고 다시 삽입할 수 있습니다.

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