Eindeloos nesten <div> Tags en jQuery

Dit lijkt een excentrieke onderwerp, Ik ben niet zeker dat het is echt de moeite waard bloggen over, maar dat heeft nooit gestopt me vóór, Dus hier gaan we Glimlach

Ik ben uit te werken op een project waar ik te sommige gegevens uit een zoekopdracht trekken ben, verpakking het omhoog in een XML-bericht en vervolgens dat XML wordt uiteindelijk omgezet in HTML via XSLT.  Er is een heleboel jQuery betrokken, een beetje waarvan sommige tabben functionaliteit implementeert.  Wanneer u klikt op een tabblad (echt, een <div>), jQuery roept .hide() en .show() op diverse divs (de eerste pagina geladen gedownload alle inhoud, zodat er in dit geval geen terugsturen zijn).

Een heleboel uren geleden, het tabblad schakelen logica begon te gedragen onregelmatig en het zou niet een van mijn tabs tonen.  Ik uiteindelijk gevolgd het neer op het feit dat internet explorer (ten minste) dacht dat de <div> Tags genest ver, veel dieper dan bestemd.De werkbalk ontwikkelaar zou weergeven:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Ten slotte tonen het helemaal naar beneden hier werd gesloten!

Dus, Als ik deed een $("# Tab1Content").verbergen(), Ik zou ook Tab2 verbergen en ik kon nooit tonen Tab2 als ik niet ook Tab1.  Ik gekopieerd en geplakt de code omhoog in visual studio en het bleek alles voor de div's voering tot keurig, net als zij waren verondersteld om te doen, op zoek als dit:

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

Ik sloeg mijn hoofd tegen de muur voor een tijdje en gemerkt dat in de werkelijke HTML code is het genereren veel van lege <div> Tags, zoals:

<lichaam>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</lichaam>

(Het bovenstaande is waaaaaaaaaaaay gesimplificeerd.  De lege div-tags zijn volkomen geldig. Sommige van mijn <div> Tags waren vol van inhoud, maar veel meer waren niet.  Ik kwam tot het besef dat mijn <XSL:for-each> richtlijnen werden de korte vorm uitstoten div tags wanneer de xsl:for-each niet ' gegevens vinden.  Ik gedwongen een HTML-commentaar in de output, zoals:

image

 

Nadat ik deed dat, alle de div's mooi opgesteld en begon te werken mijn tabblad schakelen.

Zoals altijd, Ik hoop dat dit helpt iemand in een snuifje.

</einde>

Abonneren op mijn blog.

Volg mij op Twitter op http://www.twitter.com/pagalvin

Laat een antwoord achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *