Bagaimana untuk Mengecualikan Elemen Tersembunyi daripada Pengiraan Pemilih CSS ke-anak?

Cara Mengelakkan Elemen Tersembunyi dalam CSS nth-child Selectors

Apabila menyembunyikan elemen dengan paparan: tiada yang menggunakan klik butang, nth-child selector mempertimbangkan kedua-dua item yang boleh dilihat dan tersembunyi . Ini boleh mengganggu corak penggayaan yang dimaksudkan untuk baris yang berbeza.

Penjelasan:

Pemilih CSS nth-child() memadankan elemen berdasarkan kedudukan mereka dalam kalangan adik beradik. Walau bagaimanapun, elemen tersembunyi kekal dalam DOM walaupun semasa menggunakan paparan: tiada, mengakibatkan pengiraan yang salah.

Penyelesaian:

Untuk mengecualikan elemen tersembunyi daripada kiraan anak ke-n , anda mesti mengalih keluar mereka daripada DOM sepenuhnya. Walau bagaimanapun, menggunakan kaedah remove() menghalang pemulihan kemudiannya, yang mengganggu fungsi togol.

Pendekatan Alternatif:

Sebaliknya, gunakan kaedah detach() jQuery, yang mengekalkan pendengar acara dan metadata lain. Begini caranya:

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

Penjelasan:

Kod ini menogol keterlihatan div yang dipilih sambil mengekalkan kiraan anak ke-n yang betul:

1. Simpan div yang terpisah dalam pembolehubah div.
2. Jika div tidak kosong, ia telah diklik sebelum ini. Tambahkan div kembali ke baris dalam susunan asalnya berdasarkan atribut data indeks awalnya.
3. Jika div kosong, tanggalkan div yang ditentukan dan simpannya dalam div.

Faedah:

• Memelihara ketepatan anak ke-n walaupun ada unsur tersembunyi.
• Membolehkan togol keterlihatan yang mudah tanpa mengganggu reka bentuk visual.
• Tidak perubahan pada HTML atau CSS diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Mengecualikan Elemen Tersembunyi daripada Pengiraan Pemilih CSS ke-anak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!