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。如果你有时间，请看看它。

请张贴一些代码。这听起来像你通过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

看看是否有任何已修复此之后改变。

jQuery的添加CSS来动态添加HTML元素

相关推荐