Bagaimana untuk Mengecualikan Elemen Tersembunyi daripada Pemilih anak ke-n dalam jQuery?

Cara Mengabaikan Elemen Tersembunyi Apabila Menggunakan Pemilih Kanak-kanak ke-n

Dalam senario yang diterangkan dalam pertanyaan asal, di mana elemen tersembunyi menyebabkan isu dengan pemilih anak ke-n, terdapat dua pendekatan utama untuk menyelesaikan masalah masalah:

1. Kecualikan Elemen Tersembunyi daripada DOM

Menggunakan jQuery, anda boleh mengalih keluar elemen tersembunyi daripada DOM sepenuhnya menggunakan kaedah .remove(). Ini memastikan bahawa mereka tidak lagi dianggap adik-beradik oleh pemilih anak ke-1. Walau bagaimanapun, jika anda kemudiannya ingin memulihkan elemen tersembunyi, pendekatan ini tidak sesuai.

2. Gunakan Kaedah detach() jQuery

Kaedah .detach() dalam jQuery menanggalkan elemen tersembunyi daripada DOM, tetapi tidak seperti .remove(), ia mengekalkan data jQuery elemen. Ini membolehkan elemen tertanggal dimasukkan semula kemudian tanpa kehilangan datanya.

Kod jQuery yang dikemas kini:

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 berulang melalui elemen .photos-board-item dan menetapkan setiap satu atribut data dengan indeks awalnya.
• Apabila butang Sembunyikan diklik, ia menyemak sama ada sebarang elemen telah ditanggalkan. Jika ya, ia akan memasukkan semula elemen tersebut ke dalam DOM mengikut indeks awalnya.
• Jika tiada elemen telah ditanggalkan, ia menanggalkan elemen .css--semua-foto dan menetapkannya kepada pembolehubah div.

Nota:

• The Peraturan CSS nth-child kekal sama.
• Elemen tersembunyi dikecualikan dengan berkesan daripada proses pemilihan anak ke-nth, menghasilkan kesan visual yang diingini.
• Elemen yang ditanggalkan boleh dimasukkan semula kemudian tanpa menjejaskan reka letak visual.

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