How to Exclude Hidden Elements from CSS nth-child Selector Counting?

How to Avoid Hidden Elements in CSS nth-child Selectors

When concealing elements with display: none using button clicks, nth-child selectors consider both visible and hidden items. This can disrupt styling patterns intended for different rows.

Explanation:

The CSS nth-child() selector matches elements based on their position among siblings. However, hidden elements remain in the DOM even when using display: none, resulting in incorrect counting.

Solution:

To exclude hidden elements from the nth-child count, you must remove them from the DOM entirely. However, using the remove() method prevents their later restoration, which interferes with toggling functionality.

Alternative Approach:

Instead, use jQuery's detach() method, which preserves event listeners and other metadata. Here's how:

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

Explanation:

This code toggles the visibility of selected divs while maintaining the correct nth-child count:

1. Store the detached divs in the divs variable.
2. If divs is not empty, it has been clicked previously. Append the divs back to the row in their original order based on their initial-index data attribute.
3. If divs is empty, detach the specified divs and store them in divs.

Benefits:

• Preserves nth-child accuracy despite hidden elements.
• Allows for easy toggling of visibility without disrupting visual design.
• No changes to HTML or CSS are required.

The above is the detailed content of How to Exclude Hidden Elements from CSS nth-child Selector Counting?. For more information, please follow other related articles on the PHP Chinese website!