jQuery 将 css 添加到动态添加的 html 元素答案

【问题标题】：jQuery Add css to dynamically-added html elementsjQuery 将 css 添加到动态添加的 html 元素
【发布时间】：2011-07-05 09:26:22
【问题描述】：

我正在通过 jQuery .html() 函数在页面上添加新的 li 和 div 元素。我传递的字符串有一个硬编码的类。但是尽管类已经在 css 文件中定义，但它仍然没有风格化。所以我确实使用 jQuery .css() 函数添加了样式，但仍然没有样式。如何将 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 选择器。
似乎每个人都不清楚“一些”代码的概念 :)

标签： jquery html css dynamic

【解决方案1】：

您的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.+*/
}

条件 cmets 在 CSS 文件中无效。
您使用的是Star HTML hack，根据定义，它只会将样式应用于小于 7 的 IE。

修复此问题后看看是否有任何变化。

【讨论】：