Question

我正在添加新 li ＆amp;通过jQuery .html()函数在页面上 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包含在内。如果你有时间，请看看它。

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

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

修复此问题后查看是否有任何更改。

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

1 个答案: