Bagaimana untuk Membuat Pemilih nth-Child Abaikan Elemen Tersembunyi dalam Susun Atur Grid?

Melangkau DIV Tersembunyi dalam nth-Child Selector

Masalah:

Apabila menggunakan nth -pemilih kanak-kanak untuk menggayakan elemen dalam susun atur grid, elemen tersembunyi masih dikira sebagai adik beradik, mengganggu penggayaan yang diingini.

Penyelesaian CSS Tulen (Tidak Mungkin):

Pemilih anak ke-nth menganggap semua adik-beradik tanpa mengira keterlihatan mereka, jadi tidak boleh diabaikan elemen tersembunyi hanya menggunakan CSS.

jQuery Penyelesaian:

Untuk menyelesaikan isu ini, kami boleh menggunakan jQuery untuk mengalih keluar elemen tersembunyi daripada DOM, dengan berkesan "mengecualikan" mereka daripada kiraan pemilih anak ke-n. Berikut ialah kod yang diubah suai:

<br>var divs;</p>
<p>$('.photos-board-item').each(function(i){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(this).data('initial-index', i);

Salin selepas log masuk

});

$('.hide-others').on('click', fungsi () {

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:

• Pada pemuatan halaman , setiap item diberi indeks awal.

• Apabila butang "Sembunyikan orang lain" diklik:

  • Jika div tersembunyi wujud, ia dilampirkan semula pada grid.
  • Jika tiada div tersembunyi wujud, elemen dengan kelas "css--all-photo " diasingkan daripada grid, mengecualikan mereka daripada DOM dan anak ke-n mengira.

Menggunakan pendekatan berasaskan jQuery ini, pemilih anak ke-n hanya mengira adik-beradik yang boleh dilihat, memastikan penggayaan grid yang diingini tanpa mengira div yang mana atau berapa banyak disembunyikan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pemilih nth-Child Abaikan Elemen Tersembunyi dalam Susun Atur Grid?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!