Oändligt kapsla <div> Märken och jQuery

Detta verkar vara sådan en oddball-avsnittet, Jag är inte säker på att det verkligen är värt att blogga om, men det har aldrig hindrat mig innan, Så här går vi Leende

Jag arbetar med ett projekt där jag dra vissa data från en sökning, förpackning till ett XML-meddelande och sedan att XML till slut förvandlas till HTML via XSLT.  Det finns mycket av jQuery, en bit som implementerar tabbing funktionalitet.  När du klickar på en flik (Verkligen, en <div>), jQuery anropar .hide() och .show() på olika Divar (första sidan laddar hämtningar allt innehåll så det finns ingen postbacks i detta fall).

Ett gäng timmar sedan, fliken växling logik började bete sig underligt och det skulle inte visar en av Mina flikar.  Jag slutligen spårade det till faktum att internet explorer (minst) trodde att det <div> Märken som kapslade långt, mycket djupare än avsett.Verktygsfältet utvecklare skulle visa:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Slutligen visar det lades hela vägen ner här!

Så, om jag gjorde en $("# Tab1Content").Dölj(), Jag döljer också Tab2 och jag kunde aldrig visa Tab2 om jag inte visar också på Tab1.  Jag kopierade och klistrade in koden till visual studio och det visade alla den div beklädnad upp snyggt, precis som de ska göra, Titta här:

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

Jag slog mitt huvud mot väggen ett tag och märkte att koden i den faktiska HTML genererar mycket tom <div> Märken, liksom:

<organ>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</organ>

(Ovanstående är waaaaaaaaaaaay banaliseras.  Tom div-taggarna är helt giltiga. Några av mina <div> Märken var fulla av innehåll, men många fler var inte.  Jag kom till insikten att min <XSL:för varje> direktiven avger i kortform div-taggar när xsl:för varje inte "hitta några data.  Jag tvingas en HTML-kommentar till utdata, som visas:

image

 

När jag gjorde det, alla div uppradade snyggt och min fliken växling började arbeta.

Som alltid, Jag hoppas att detta hjälper någon i en nypa.

</slutet>

Prenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin

Lämna svar

Din e-postadress kommer inte att publiceras. behövliga fält är markerade *