Endlessly Nesting <div> Tag at jQuery

Ito tila tulad ng isang paksa oddball, Hindi ako sigurado ito ay talagang nagkakahalaga ng pag-blog tungkol sa, ngunit na hindi kailanman tumigil sa akin bago, kaya dito kami pumunta ngiti

Ako nagtatrabaho out sa isang proyekto kung saan ako kumukuha ng ilang mga data mula sa isang paghahanap, packaging up ito sa isang XML mensahe at pagkatapos ay na XML sa huli ay transformed sa HTML sa pamamagitan ng XSLT.  Mayroong maraming mga jQuery kasangkot, isa bit na kung saan ipinapatupad ng ilang mga pag-andar tabbing.  Kapag nag-click ka sa isang tab (talaga, isang <div>), jQuery invokes. itago() at. palabas() sa iba't-ibang mga divs (ang paunang pag-load ng pahina Dina-download ang lahat ng mga nilalaman sa gayon walang mga postbacks sa kasong ito).

Ang isang grupo ng mga oras ang nakalipas, ang tab paglipat logic nagsimulang kumilos erratically at hindi ito ay magpapakita ng isa sa aking mga tab.  Ako sa huli sinubaybayan ito pababa sa ang katunayan na ang internet explorer (kahit) naisip na ang <div> mga tag nested malayo, malayo mas malalim kaysa intended.The developer toolbar ay magpapakita ng:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Sa wakas ay nagpapakita ng ito ay sarado ang lahat ng paraan ang down dito!

Kaya, kung ginawa ko ang isang $("# Tab1Content").itago(), Gusto ko ring itago Tab2 at hindi ko maaaring magpakita Tab2 kung hindi ko ring ipakita Tab1.  Ako kopyahin at ilagay ang code hanggang sa visual studio at ito ay nagpakita ng lahat ng lining ang div up ni mabuti, tulad lang nila na ipagpalagay na paggawa, naghahanap ng ganito:

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

Matalo ko ang aking ulo laban sa mga pader para sa isang habang at napansin na sa aktwal na code ng HTML ay bumubuo ng maraming laman <div> mga tag, katulad:

<katawan>

  <div id = "Tab1Content">

    <div id = "ROW1" />
    <div id = "ROW2" />

  </div>

  <div id = "Tab2Content">

    <div id = "ROW1" />
    <div id = "ROW2" />

  </div>

</katawan>

(Sa itaas ay waaaaaaaaaaaay oversimplified.  Ang walang laman div tag ay lubos wastong. Ang ilan sa aking <div> mga tag ay puno ng mga nilalaman, ngunit marami pa ay hindi.  Ako ay dumating sa pagtanto na ang aking <xsl:para sa-bawat> mga kautusan ay nagpapalabas ng mga short-form na tag div kapag ang xsl:para-sa-bawat ay hindi 'makahanap ng anumang data.  Pinilit ako ng isang HTML komento sa output, tulad ng ipinapakita:

image

 

Pagkatapos kong gumawa niyan, lahat ng div ay ang naka-linya up mabuti at ang aking tab Paglipat nagsimula nagtatrabaho.

Tulad ng nakasanayan, Umaasa ako na ito ay tumutulong sa isang tao sa isang pakurot.

</dulo>

Mag-subscribe sa aking blog.

Sundin ako sa Twitter sa http://www.twitter.com/pagalvin

-Iwan ng sagot

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan *