jQuery的添加CSS來動態添加HTML元素

我加入新李 & 格在頁面上元素的jQuery .html()功能的手段。我傳遞的字符串有一個硬編碼的類。但它仍然沒有風格化，但類已經在css文件中定義了。所以我通過使用jQuery .css()函數添加樣式，但仍然沒有樣式。我怎樣才能添加CSS到這些動態添加的HTML元素？jQuery的添加CSS來動態添加HTML元素

for(i=0; i<directionList.length; i++) { 
    html += "<li class='dir-list'> \ 
     <div class='dir-loc'><b>" + directionList[i].location + "</b></div><br /> \ 
     <div class='dir-dest'> \ 
     <div class='dir-dest-icon'><img src='markers/new/transit-small.gif' class='dir-va-mid' title='by transit'/></div> \ 
     <div class='dir-dest-action'><span class='dir'>Ride to</span></div> \ 
     <div class='dir-dest-loc'><span class='dir'><b>" + directionList[i].destination + "</b></span></div> \ 
     <ul class='dir-routes'>"; 

    // add routes 
    var routes = directionList[i].routes; 
    for(j=0; j<routes.length; j++){ 
     html += "<li> \ 
      <div class='dir-route-type-icon'><img src='markers/new/" + routes[j].type + "-small.gif' class='dir-va-mid' title='" + routes[j].type + "'/></div> \ 
      <div class='dir-route-name'><span class='dir-va-mid' >" + routes[j].name + "</span></div> \ 
      </li>"; 
    } 

    html += "</ul> \ 
     </div> \ 
     </li>"; 

    /* 
    var index = parseFloat(i)+1; 
    directions += "<li>" + directionList[i].location + "<span>"; 
    //get routes 
    var routes = []; 
    routes = directionList[i].routes; 
    directions += "<ul>"; 
    for(j=0; j<routes.length; j++){ 
     directions += "<li> (" + routes[j].type + ") " + routes[j].name + "</li>" ; 
    } 
    directions += "</ul>"; 
    directions += "</li>"; 
    */ 
} 

html += "</ul>"; 
$('#directions').html(html);

CSS：

#directions div { 
    display:inline; 
    vertical-align:middle; 
} 
#directions ul#dir { 
    list-style:decimal; 
} 
#directions ul.dir-routes { 
    list-style: none; 
} 

.dir-va-mid { 
    vertical-align:middle; 
}

強行添加CSS：

$("#directions div").css({'display':'inline', 'vertical-align':'middle'}); 
$("#directions ul#dir").css({'list-style':'decimal'}); 
$("#directions ul.dir-routes").css({'list-style':'none'}); 
$(".dir-va-mid").css({'vertical-align':'middle'});

編輯：我已經列入我的文件here。如果你有時間，請看看它。

來源

2011-02-27 Jairo

請張貼一些代碼。這聽起來像你通過jQuery添加的元素根本不匹配你現有的CSS選擇器。 – Dominic 2011-02-27 21:15:59

「一些」代碼的概念似乎對每個人都不清楚:) – 2011-02-27 21:29:46

這聽起來像你有一個CSS specificity問題。

純粹作爲測試，看看這確實是你的問題，您應該刪除您的jQuery .css()線，並添加!important每個申報在你的CSS，像這樣：

#directions div { 
    display: inline !important; 
    vertical-align: middle !important; 
} 
#directions ul#dir { list-style: decimal !important;} 
#directions ul.dir-routes { list-style: none !important;} 

.dir-va-mid { 
    vertical-align: middle !important; 
}

如果這個作品，那麼你的需要顯示更多的周邊HTML，所以我們可以給你一個適當的解決方案這將適當地利用特定的規則。

除非沒有其他辦法，否則不應使用!important來創建帶狀問題。

如果它仍然不起作用，那麼還有一些其他問題，無論如何，您可能需要向我們展示更多代碼。

我無法重新創建您發佈的文件的問題，因爲大量文件丟失。

不過，我確實注意到一件事CSS文件內這是不正確的：

<![if lt IE 7]> 
* html #outer{ 
    width:100%;/* box model hack for ie5.+*/ 
} 
<![endif]>

你應該改變這樣的：

* html #outer{ 
    width:100%;/* box model hack for ie5.+*/ 
}

條件註釋不在CSS文件中有效。
您使用的是Star HTML hack，根據定義只適用樣式即小於7

看看是否有任何已修復此之後改變。

來源

2011-02-27 21:37:22 thirtydot

jQuery的添加CSS來動態添加HTML元素

回答

相關問題