jquery .hide() Fehler in Safari

Question

ive hatte Probleme mit diesem verstecken Bug, der nur Safari betrifft. Dies ist ein einfacher vertikaler Scroller, der das erste Element in der Liste verbirgt und dann das letzte anzeigt. und funktioniert in allem außer Safari. Das Problem scheint zu sein, dass die Divs, die hier arbeiten, die gleiche Klasse teilen, aber eindeutige IDs haben wie # mycollectioncomment1, #mycollectioncomment2, #mycollectioncomment3 etc ... aber das Verstecken von nur einem dieser divs verbirgt alle anderen divs, die dieselbe Klasse teilen . Ich habe versucht. FadeOut (0), dass jeder als die Arbeit vorgeschlagen, aber es funktioniert einfach nicht hier.

var commentListCount = $(".myCollectionLatest").size(); 
var mycollclickCount = 0; 
var showingcomments = 5; 
if ($('.licomment').size() > 0) { 
    showingcomments = 4; 
    //alert("this"); 
} 
if ($('.lookInSeasonList').size() > 0) { 
    showingcomments = 5; 
} 
if ($('.lookDescMiddle').size() > 0) { 
    showingcomments = 8; 
} 
if ($('.MyCollectionsCollectionHolder').size() > 0) { 
    showingcomments = 5; 
} 
// if (commentListCount > 5) { 
$(".myCollectionLatest").hide(); 
for (i = 0; i < showingcomments; i++) { 
    $("#mycollectioncomment" + i).show(); 
} 
$('#mycolldown').click(function() { 
    var element1, element2; 
    if (showingcomments <= commentListCount) { 
     mycollclickCount++; 
     element1 = $("#mycollectioncomment" + mycollclickCount.toString()); 
     element2 = $("#mycollectioncomment" + showingcomments.toString()); 
     element1.closest('.licomment').hide(); 
     element2.closest('.licomment').show(); 
     showingcomments++; 
    } 
}); 
$('#mycollup').click(function() { 
    if (showingcomments <= 5) { 

    } else { 
     $("#mycollectioncomment" + mycollclickCount.toString()).show(); 
     $("#mycollectioncomment" + mycollclickCount.toString()).closest('.licomment').show(); 
     mycollclickCount--; 
     showingcomments--; 
     $("#mycollectioncomment" + showingcomments.toString()).hide(); 
     $("#mycollectioncomment" + showingcomments.toString()).closest('.licomment').show(); 

    } 
}); 

--- HTML-Markup ---

<div style="width:260px; 

       height:975px; 

       float:left; 

       border-right:solid 1px #e70079; 

       border-bottom:solid 1px #e70079; 

       border-left:solid 1px #e70079; 

       margin-top:180px;"> 

    <h2 align="center"> 

     <br /> 

      COLLECTION LATEST 

     </h2> 



<img src="/images/my-collection/black-up.jpg" id="mycollup" /><ul><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment1"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6855"><img src="/media/6855/makeuo_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6855" class="usernamelinkdiv">CHARLOTTE</a> SAID ABOUT 



         <span class="pinkTxt"><br /><a href="/products/face/powder/pressed-powder.aspx">PRESSED POWDER</a></span></b><p>put this on after foundation. its the best cover powder + re... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6855"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment2"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6331"><img src="/media/6331/26462_1267423081357_1103204986_2592317_7875205_n_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6331" class="usernamelinkdiv">ANN</a> SAID ABOUT 



         <span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/brilliant-shimmer-duo-eye-wands.aspx">BRILLIANT SHIMMER DUO EYE WANDS</a></span></b><p>Likewise Natasha, i thought it would be a great product as i... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6331"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment3"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5168"><img src="/media/5168/P03-09-09_11.36_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5168">SINYEE</a> SAID 

         </b><p>i used to use this. 

but now it doesnt seem to go on my skin... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5168"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment4"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6941"><img src="/media/6941/purple 2_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6941">MARIA</a> SAID 

         </b><p>I love this product, not used creme blush for years so just ... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6941"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment5"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6329"><img src="/media/6329/snapshot_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6329" class="usernamelinkdiv">ALICE</a> SAID ABOUT 



         <span class="pinkTxt"><br /><a href="/products/eyes/mascara/collagen-curl-mascara.aspx">COLLAGEN CURL MASCARA</a></span></b><p> 

if you put a few drops of water in it, 

you will be stunne... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6329"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment6"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=4466"><img src="/media/4466/DSC00260_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=4466" class="usernamelinkdiv">KATE</a> SAID ABOUT 



         <span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/eye-palettes.aspx">EYE PALETTES</a></span></b><p>Went to Superdrug and saw these, i bought the pop-tastic pal... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=4466"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment7"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=4756"><img src="/media/4756/dfgdf_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=4756">JULIE</a> SAID 

         </b><p>They are great and look amazing on thier own with some masca... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=4756"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment8"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=7006"><img src="/media/7006/IMG_1441_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=7006" class="usernamelinkdiv">ABIR</a> SAID ABOUT 



         <span class="pinkTxt"><br /><a href="/products/eyes/mascara/big-fake-false-lash-effect-mascara.aspx">BIG FAKE FALSE LASH EFFECT MASCARA</a></span></b><p>It's no good. since the time i started using it i have had m... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=7006"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment9"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5242"><img src="/media/5242/me_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5242" class="usernamelinkdiv">REIKO</a> SAID ABOUT 



         <span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/dazzle-me!-eye-dust.aspx">DAZZLE ME! EYE DUST</a></span></b><p>Brilliant Pigment Eye shadow dusts, stop wasting your money ... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5242"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment10"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5048"><img src="/media/5048/Melissa x_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5048">MELISSA</a> SAID 

         </b><p>I have the whole collection and wear it everyday :D I absolu... 

       </p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5048"> 

         See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li></ul><img src="/images/my-collection/black-down.jpg" id="mycolldown" /><script> 
                                                      if (BrowserDetect.browser == "Safari") { 
                                                       if ($('#myCollectionFeaturedCollection').size() == 1) { 
                                                        $('#mycolldown').css({ "margin-top": "580px !important" }); 
                                                       } else { 
                                                        $('#mycolldown').css({ "margin-top": "380px !important" }); 
                                                       } 
                                                      } 

    </script> 

<!--<img src="/images/my-collection/black-up.jpg" id="mycollup" /><ul /><img src="/images/my-collection/black-down.jpg" id="mycolldown" /> --> 





</div> 

Answer 1

Sie den Code optimieren sollte:

$('#mycolldown').click(function() { 
    var element1, element2, licom, myColCom; 
    if (showingcomments <= commentListCount) { 
     mycollclickCount++; 

     licom = '.licomment'; 
     myColCom = '#mycollectioncomment'; 
     element1 = $([myColCom, mycollclickCount].join('')); 
     element2 = $([myColCom, showingcomments].join('')); 

     element1.closest(licom).hide(); 
     element2.closest(licom).show(); 
     showingcomments++; 
    } 
}); 

Nachtrag

Es fällt mir ein, dass Sie sein könnte mit closest() falsch (oder vielleicht nicht, da es in everything funktioniert g außer Safari). Wenn die Elemente, die Sie anvisieren möchten, keine Vorfahren sind, wird closest() Sie nicht erfüllen. In jedem Fall müssten wir etwas Markup sehen, um das Problem weiter zu diagnostizieren.

Answer 2

Ich weiß nicht, ob dies das Problem ist, aber Sie verwenden ungültigen Markup:

<div class="collbottompic" /> 

Die Fehlermeldung, die ich in Safari zu bekommen ist:

XML selbstschließenden Tag Syntax verwendet auf <div>. Das Tag wird nicht geschlossen.

Könnte sein, dass dies den Rest des Markups durcheinander bringt. Ich würde das zuerst beheben.

Answer 3

Das war die Antwort^Die Liste html wurde von xslt erzeugt und wenn einer der divs keine innereHTML zugewiesen hatte, wurde sie umgewandelt. Ich muss deine Antwort ankreuzen, aber ich kann mich nicht an mein Passwort erinnern, um mich anzumelden.