Bagaimana Menggayakan Baris dengan Betul dengan Pemilih anak ke-n Apabila Unsur Tersembunyi Wujud?

Cara Memintas Elemen Tersembunyi Apabila Menggunakan Pemilih anak ke-n

Pemilih anak ke-nth membenarkan anda menyasarkan elemen berdasarkan kedudukannya di kalangan elemen adik beradik mereka. Walau bagaimanapun, pemilih ini mengira elemen tersembunyi, yang boleh menyebabkan masalah apabila anda mahu baris tertentu dalam grid dipaparkan secara berbeza.

Dalam kes anda, anda menggunakan pemilih anak ke-n untuk menukar penampilan setiap baris ke-n dalam grid blok. Apabila anda menyembunyikan beberapa blok menggunakan paparan: tiada, pemilih anak ke-n masih mengiranya, membawa kepada penggayaan yang salah.

Penyelesaian Berasaskan CSS

Malangnya, tiada penyelesaian CSS tulen untuk masalah ini. Pemilih anak ke-n hanya melihat semua adik-beradik, tanpa mengira keterlihatan mereka.

Penyelesaian Berasaskan jQuery

Untuk mengelak daripada memasukkan elemen tersembunyi dalam pengiraan anak ke-n anda, anda perlu mengalih keluarnya daripada DOM apabila ia disembunyikan. jQuery menyediakan kaedah .detach() untuk tujuan ini:

$(".hide-others").click(function () {
  var divs;

  $(".photos-board-item").each(function (i) {
    $(this).data("initial-index", i);
  });

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

Kod ini mengalih keluar elemen tersembunyi daripada DOM apabila butang "Sembunyikan orang lain" diklik. Apabila butang diklik sekali lagi, elemen dimasukkan semula ke dalam DOM, mengekalkan susunan asalnya.

Demo

Berikut ialah demo yang menunjukkan penyelesaiannya:

[DEMO FIDDLE]

Dengan menggunakan kaedah .detach(), anda boleh togol keterlihatan elemen tanpa melanggar logik pemilih anak ke-n, memastikan setiap baris dalam grid anda mengekalkan penampilan yang diingini.

Atas ialah kandungan terperinci Bagaimana Menggayakan Baris dengan Betul dengan Pemilih anak ke-n Apabila Unsur Tersembunyi Wujud?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!