jquery .hide（）safari中的bug

Question

我一直有這個隱藏的問題，隻影響safari的問題。這是一個簡單的垂直滾動器，隱藏列表中的第一個元素，然後顯示最後一個元素。並且除了Safari瀏覽器以外的所有應用程序。問題似乎是在這裏與這裏工作的div共享相同的類，但有像＃mycollectioncomment1，＃mycollectioncomment2，＃mycollectioncomment3等獨特的ID ...但是隻隱藏其中一個div隱藏所有共享同一類的其他div 。我曾嘗試.fadeOut（0），每個人都建議作爲工作，但它只是在這裏工作。

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標記---

<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

你應該優化代碼：

$('#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++; 
    } 
}); 

附錄

它發生，我認爲你可能是錯誤地使用closest()（或者可能不是，因爲它在每一個細節都有效除Safari之外）。如果你想要瞄準的元素不是祖先，closest()會使你失敗。無論如何，我們需要看到一些標記來進一步診斷問題。

Answer 2

我不知道這是不是問題，但你使用無效的標記：

<div class="collbottompic" /> 

該錯誤消息我在Safari中得到的是：

XML自動關閉標籤在<div>上使用的語法。 標籤不會關閉。

可能是因爲這會弄亂其餘的標記。我會先解決。

Answer 3

這就是答案^列表html是由xslt生成的，當其中一個div沒有被分配任何innerHTML時，它變成了。我需要勾選您的答案，但不能記住我的密碼登錄。只要我進來，我就會打勾！