Nidificazione all'infinito <div> Tag e jQuery

Questo mi sembra un soggetto così stravaganti, Non sono sicuro che vale davvero la pena bloggare su, ma che non ha mai smesso prima di me, quindi qui si va sorriso, sorridere

Sto lavorando su un progetto dove sto tirando alcuni dati da una ricerca, imballaggio in un messaggio XML e poi il codice XML viene trasformato in definitiva in HTML tramite XSLT.  C'è un sacco di jQuery coinvolte, un bit di che implementa alcune funzionalità di tabulazione.  Quando fa clic su una scheda (davvero, un <div>), jQuery richiama .hide() e .show() su vari DIV (il caricamento della pagina iniziale Download tutto il contenuto, quindi non ci sono in questo caso postback).

Un mucchio di ore fa, la scheda logica di commutazione ha iniziato a comportarsi in modo strano e non mostra una delle mie schede.  Io alla fine esso monitorati al fatto che internet explorer (almeno) pensava che la <div> tag nidificati lontano, molto più profondo da desiderata.Avrebbe mostrato la developer toolbar:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Infine mostrandolo è stata chiusa fino in fondo!

Così, Se ho fatto un $("# Tab1Content").Nascondi(), Sarebbe anche nascondere Tab2 e mai potuto mostrare Tab2 anche se non ha mostro Tab1.  Ho copiato e incollato il codice in visual studio e ha mostrato a tutti di rivestimento del div fino piacevolmente, proprio come avrebbero dovuto fare, guardando come questo:

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

Ho battuto la testa contro il muro per un po' e ho notato che nel codice HTML effettivo codice era generando un sacco di vuoto <div> Tag, come:

<corpo>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</corpo>

(Quanto sopra è waaaaaaaaaaaay semplificato.  I tag div vuota sono totalmente validi. Alcuni dei miei <div> Tag erano piene di contenuti, ma molti altri non hanno.  Sono venuto alla realizzazione che mio <xsl:for each> le direttive sono state che emettono la forma abbreviata div tag quando xsl:for each non ' trovare tutti i dati.  Sono costretto a un commento HTML nell'output, come illustrato:

image

 

Dopo che ho fatto che, il div in fila piacevolmente ed il mio switching tab iniziò a lavorare.

Come sempre, Spero che questo aiuta a qualcuno in un pizzico.

</fine>

Iscriviti al mio blog.

Seguimi su Twitter a http://www.twitter.com/pagalvin

Lasciare una risposta

L'indirizzo email non verrà pubblicato. i campi richiesti sono contrassegnati *