Tanpa henti bersarang <div> Tag dan jQuery

Ini tampaknya seperti eksentrik topik, I 'm not sure it's benar-benar worth blogging tentang, tapi itu tidak pernah berhenti saya sebelumnya, Jadi di sini kita pergi Tersenyum

Saya bekerja pada sebuah proyek di mana aku menarik beberapa data dari pencarian, Kemasan ini ke pesan XML dan kemudian XML yang pada akhirnya berubah menjadi HTML melalui XSLT.  Ada banyak jQuery yang terlibat, salah satu dari sedikit yang mengimplementasikan beberapa fungsi tabbing.  Bila Anda klik pada tab (Benarkah, a <div>), jQuery memanggil .hide() dan .show() pada berbagai divs (beban awal halaman download semua konten jadi tidak ada postbacks dalam hal ini).

Sekelompok menit yang lalu, tab beralih logika mulai bersikap tak menentu dan itu tidak menunjukkan salah satu tab saya.  Saya akhirnya dilacak ke kenyataan bahwa internet explorer (setidaknya) berpikir bahwa <div> Tag bersarang jauh, jauh lebih dalam daripada yang dimaksudkan.Toolbar pengembang akan menunjukkan:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-akhirnya menunjukkan itu ditutup sepanjang jalan di sini!

Jadi, Jika saya melakukan $("#Tab1Content").Sembunyikan(), Saya juga akan menyembunyikan Tab2 dan aku tidak pernah bisa menunjukkan Tab2 jika aku juga tidak menunjukkan Tab1.  Aku disalin dan disisipkan kode ke visual studio dan menunjukkan semua lapisan div up manis, sama seperti mereka seharusnya melakukan, tampak seperti ini:

-<div id = "Tab1Content">
  +<div>
  +<div>
-<div id = "Tab2Content">
  +<div>
  +<div>

Aku mengalahkan kepalaku ke dinding untuk sementara dan melihat bahwa dalam HTML sebenarnya kode ini menghasilkan banyak kosong <div> Tags, seperti:

<bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">

  <div id = "Tab1Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

  <div id = "Tab2Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

</bodyHTMLan >>< kuat > pesan yang kuat.</strong> </body> </html> ">

(Di atas adalah waaaaaaaaaaaay yang disederhanakan.  Tag div kosong benar-benar berlaku. Beberapa saya <div> Tag yang penuh dengan konten, tetapi banyak lagi tidak.  Saya datang ke realisasi bahwa saya <Extensible Stylesheet Language:untuk setiap> arahan yang memancarkan bentuk pendek div tag ketika xsl:tidak untuk setiap ' menemukan data.  Aku memaksa komentar HTML ke output, seperti yang ditunjukkan:

image

 

Setelah saya melakukan itu, Semua div berbaris dengan baik dan tab beralih mulai bekerja.

Seperti biasa, Saya harap ini membantu seseorang dalam keadaan darurat.

</akhir>

Berlangganan ke blog saya.

Ikuti saya di kegugupan di http://www.twitter.com/pagalvin

Tinggalkan balasan

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *