在包裝div後正確插入div

所以正如標題所示，我試圖在我的包裝div後插入'cookie'警告。我已經使用追加和嘗試，但一切在結束的div cookiebar在包裝div後正確插入div

var cname = "consentCookie"; 
var cvalue = "on"; 
var exdays = "20"; 
var cookiehtml = '\ 
    <div id="cookiebar">\ 
    We use cookies to track usage and preferences. \ 
    <a href="#" id="enablecookies" onclick="setCookie();">I Understand.</a>\ 
    </div>'; 
    function setCookie() { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
    $('#cookiebar').hide(); 
} 
function getCookie() { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1); 
     if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
    } 
    return ""; 
} 

$(document).ready(function(){ 
    if(getCookie() == ''){ 
     $('#wrapper:first-child').after(cookiehtml); 
    } 
    else if(getCookie() == 'on'){ 
     $('#cookiebar').hide(); 
    } 

    });

和HTML

<html> 
      <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
       <link rel="icon" type="image/ico" href="assets/logo/logo.ico"> 

        <link rel="stylesheet" style="text/css" href="../cookiebar/cookiebar.css"> 


       <link rel="stylesheet" style="text/css" href="css/styles.css"> 
       <link rel="stylesheet" style="text/css" href="css/fonts.css"> 
       <link rel="stylesheet" style="text/css" href="css/navigation_bar.css"> 
       <link rel="stylesheet" type="text/css" href="css/lato_font.css"> 

       <script src="js/jquery.min.js"></script> 
       <script src="../cookiebar/cookiebar.js"></script> 
       <script src="js/jquery.color-RGBa-patch.js"></script> 
       <script src="js/navigation_bar.js"></script> 

       <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
       <meta name="description" content="League of Legends patch notes in a minimalistic and modern way."> 
       <meta name="keywords" content="league, of, league notes,legends, patch, notes, leaguenotes,Patch '.$Patch_No.' "> 
       <meta name="author" content="Kacper Turon"> 
       <title>LeagueNotes - '.$Patch_No.'</title> 
      </head> 
      <body> 
      <div id="wrapper"></div>

我剩下的就是執行這樣的div ID包裝大量的代碼，然後後添加代碼只是最重要的位代碼cuz有它的負載

更新：我已經添加了我用來創建cookie和隱藏酒吧的功能，我已經嘗試了迄今爲止的所有建議，並且cookiebar div土地旁邊包裝作爲兄弟姐妹如此

<div id="wrapper"> 
</div> 
<div id="cookiebar"> 
</div>

，我想它是作爲第一個孩子在包裝

來源

2015-08-19 Higeath

難道你嘗試'（'＃wrapper'）。after（cookiehtml）;'?? – joyBlanks

如果你想要在'＃wrapper'之後插入你的cookie代碼，這應該可以工作：'$（'＃wrapper'）。after（cookiehtml）;'爲什麼要使用'：first-child'？ – blex

我應該提到cookiehtml應該是包裝的第一個孩子，現在只使用$（'＃wrapper'）。（cookiehtml）;它在兄弟姐妹層面 – Higeath

首先，我不知道你使用:first-child如預期。您應該簡單地使用:first或:eq(0)。

但即使如此，您可能也想使用insertAfter()而不是after()。因此

$(document).ready(function(){ 
    if(getCookie() == ''){ 
     $('#wrapper:first-child').after(cookiehtml); 
    } 
    ...

應該是：

$(document).ready(function(){ 
    if(getCookie() == ''){ 
     $(cookiehtml).insertAfter('#wrapper'); 
    } 
...

http://jsfiddle.net/grh1w80q/1/

或者如果你喜歡cookiehtml是父#wrapper指定的第一個節點上，使用prependTo()：

$(document).ready(function(){ 
    if(getCookie() == ''){ 
     $(cookiehtml).prependTo('#wrapper'); 
    } 
...

http://jsfiddle.net/grh1w80q/2/

來源

2015-08-19 19:11:27

最後一點是我想要的prepend謝謝你生病檢查這個答案在5分鐘 – Higeath

@Higeath謝謝我欣賞，如果你接受:) –

如果你想cookiehtml是第一要素內的wrapper div中，jQuery的你可以使用prepend：

if(getCookie() == ''){ 
    $('#wrapper').prepend(cookiehtml); 
}

這將使HTML DOM看起來像：

<div id="wrapper"> 
    <div id="cookiebar"> 
     ... 
    </div> 
    ... 
</div>

來源

2015-08-19 19:14:18

這是正確的答案感謝，但上面的人更快：P – Higeath

回答

相關問題