Javascript 将包含类名的html脚本附加到div标记没有效果(没有明显的css呈现)
我使用JSON数据在列表中循环以构建HTML的LI行。问题是在使用JQuery追加时,类名对web浏览器没有明显的影响。(就好像类名不存在一样) 每月计划#6没有背景色,这意味着没有正确使用或附加类名 这里有什么问题吗Javascript 将包含类名的html脚本附加到div标记没有效果(没有明显的css呈现),javascript,jquery,jquery-append,Javascript,Jquery,Jquery Append,我使用JSON数据在列表中循环以构建HTML的LI行。问题是在使用JQuery追加时,类名对web浏览器没有明显的影响。(就好像类名不存在一样) 每月计划#6没有背景色,这意味着没有正确使用或附加类名 这里有什么问题吗 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title><
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
li
{
margin: 0px 0px 0px 0px;
border-top: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
padding: 0px 0px 0px 0px;
list-style: none;
}
ul
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: solid 0px #000000;
list-style: none;
}
ul li.liFirstChild
{
border-bottom: solid 0px #000000;
-webkit-border-top-left-radius: 14px 14px;
-webkit-border-top-right-radius: 14px 14px;
-webkit-border-bottom-left-radius: 0px 0px;
-webkit-border-bottom-right-radius: 0px 0px;
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-radius: 14px 14px 0px 0px;
}
ul li:last-child, ul li.liLastChildTrue
{
border-bottom: solid 1px #000000;
-webkit-border-bottom-left-radius: 14px 14px;
-webkit-border-bottom-right-radius: 14px 14px;
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
border-radius: 0px 0px 14px 14px;
background-color: #ff0000;
}
ul li.liLastChildFalse
{
-webkit-border-bottom-left-radius: 0px 0px;
-webkit-border-bottom-right-radius: 0px 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-radius: 0px 0px 0px 0px;
border-bottom: solid 0px #ffffff;
background-color: #ff00ff;
}
</style>
<script type="text/javascript" src="/Member/Scripts/jquery-v2.0.3/jquery-v2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var _dataHtmlRow = { "Booklet": [{ "Id": "0", "Schedule": "12 Payments", "Year": "1", "PaymentAmount": "$2.00" }, { "Id": "1", "Schedule": "18 Payments", "Year": "1.5", "PaymentAmount": "$4.00" }, { "Id": "2", "Schedule": "24 Payments", "Year": "2", "PaymentAmount": "$6.00" }, { "Id": "3", "Schedule": "30 Payments", "Year": "2.5", "PaymentAmount": "$8.00" }, { "Id": "4", "Schedule": "36 Payments", "Year": "3", "PaymentAmount": "$10.00" }, { "Id": "5", "Schedule": "42 Payments", "Year": "3.5", "PaymentAmount": "$12.00" }] };
//Calculate Quick Quote - Button...
$('#buttonCalculateQuickQuote').on('click', function (e) {
var htmlRow = "";
var $divGridViewer = $('#divGridViewer');
$divGridViewer.empty();
$divGridViewer.append("<ul>");
$.each(_dataHtmlRow.Booklet, function (i, o) {
htmlRow = "";
htmlRow += "<li " + (i == 0 ? "class='liFirstChild'" : "") + " style='background-color:#FFA94C;'>";
htmlRow += " <div style='float:left;'>Monthly Plan #" + (i + 1).toString() + "</div>";
htmlRow += " <div style='clear:both;'></div>";
htmlRow += "</li>";
htmlRow += "<li>";
htmlRow += " <div style='float:left;'>Schedule: </div>";
htmlRow += " <div style='float:right;'>" + o.Schedule + "</div>";
htmlRow += " <div style='clear:both;'></div>";
htmlRow += "</li>";
htmlRow += "<li>";
htmlRow += " <div style='float:left;'>Year: </div>";
htmlRow += " <div style='float:right;'>" + o.Year + "</div>";
htmlRow += " <div style='clear:both;'></div>";
htmlRow += "</li>";
htmlRow += "<li class='" + (i == (_dataHtmlRow.Booklet.length - 1) ? "liLastChildTrue" : "liLastChildFalse") + "'>";
htmlRow += " <div style='float:left;'>Payment Amt: </div>";
htmlRow += " <div style='float:right;'>" + o.PaymentAmount + "</div>";
htmlRow += " <div style='clear:both;'></div>";
htmlRow += "</li>";
$divGridViewer.append(htmlRow);
});
$divGridViewer.append("</ul>");
return false;
});
});
</script>
</head>
<body>
<div style="padding:25px;">
<div style="padding-bottom:20px;">
<input type="button" id="buttonCalculateQuickQuote" value="Calculate Quick Quote" style="" />
</div>
<div>
<div id="divGridViewer">
</div>
</div>
</div>
</body>
</html>
锂
{
保证金:0px 0px 0px 0px;
边框顶部:实心1px#000000;
左边框:实心1px#000000;
右边框:实心1px#000000;
填充:0px 0px 0px 0px;
列表样式:无;
}
保险商实验室
{
保证金:0px 0px 0px 0px;
填充:0px 0px 0px 0px;
边框:实心0px#000000;
列表样式:无;
}
ul li.liffirstchild
{
边框底部:实心0px#000000;
-webkit边框左上半径:14px 14px;
-webkit边框右上半径:14px 14px;
-webkit边框左下半径:0px 0px;
-webkit边框右下半径:0px 0px;
-左上角moz边界半径:14px;
-moz边界半径右上角:14px;
-moz边框半径左下角:0px;
-moz边框半径右下角:0px;
边界半径:14px 14px 0px 0px;
}
最后一个孩子,最后一个孩子
{
边框底部:实心1px#000000;
-webkit边框左下半径:14px 14px;
-webkit边框右下半径:14px 14px;
-moz边界半径左下角:14px;
-moz边界半径右下角:14px;
边界半径:0px 0px 14px 14px;
背景色:#ff0000;
}
ul li.liLastChildFalse
{
-webkit边框左下半径:0px 0px;
-webkit边框右下半径:0px 0px;
-moz边框半径左下角:0px;
-moz边框半径右下角:0px;
边界半径:0px 0px 0px 0px;
边框底部:实心0px#ffffff;
背景色:#ff00ff;
}
$(文档).ready(函数(){
var_dataHtmlRow={“小册子”:[{“Id”:“0”,“附表”:“12次付款”,“年”:“1”,“付款金额”:“$2.00”},{“Id”:“1”,“附表”:“18次付款”,“年”:“1.5”,“付款金额”:“$4.00”},{“Id”:“2”,“附表”:“24次付款”,“年”:“2”,“付款金额”:“$6.00”},{“Id”:“3”,“附表”:“30次付款”,“年”:“2.5”,“付款金额”:“$8.00”},{“Id”:“4”,“附表”:“36次付款”,“年度”:“3”,“付款金额”:“10.00”},{“Id”:“5”,“附表”:“42次付款”,“年度”:“3.5”,“付款金额”:“12.00”});
//计算快速报价-按钮。。。
$(#buttonCalculateQuickQuote')。在('click',函数(e)上{
var htmlRow=“”;
var$divGridViewer=$(“#divGridViewer”);
$divGridViewer.empty();
$divGridViewer.append(“”);
$。每个(_dataHtmlRow.bulket,函数(i,o){
htmlRow=“”;
htmlRow+=“- ”;
htmlRow++=“月度计划”+(i+1).toString()+”;
htmlRow+=“”;
htmlRow+=“
”;
htmlRow+=“- ”;
htmlRow+=“时间表:”;
htmlRow+=“”+o.时间表+“”;
htmlRow+=“”;
htmlRow+=“
”;
htmlRow+=“- ”;
htmlRow+=“年:”;
htmlRow+=“+o.年+”;
htmlRow+=“”;
htmlRow+=“
”;
htmlRow+=“- ”;
htmlRow+=“付款金额:”;
htmlRow+=“o.PaymentAmount+”;
htmlRow+=“”;
htmlRow+=“
”;
$divGridViewer.append(htmlRow);
});
$divGridViewer.append(“
”);
返回false;
});
});
问题是您混淆了append()
的目的。如果使用浏览器开发工具检查元素,您将看到html如下所示:
<div id="divGridViewer">
<ul></ul>
<li class="liFirstChild" style="background-color:#FFA94C;">...</li>
<li>...</li>
</div>
另一个问题是,您正在为月度计划标题设置内联样式。这意味着添加类时,背景色将被忽略,因为内联样式将覆盖它。您可以使用
background color:#ffff00强制使用CSS颜色!重要的代码>但不建议这样做
相反,您应该给它另一个橙色背景的类(我可能会选择这个):
或者另一种选择是使用一些CSS将其应用于每4项,但最后一项除外:
ul li:nth-child(4n):not(:last-child) {
background-color:#FFA94C;
}
这是包含这些更改的完整页面
$(文档).ready(函数(){
var_dataHtmlRow={“小册子”:[{“Id”:“0”,“附表”:“12次付款”,“年”:“1”,“付款金额”:“$2.00”},{“Id”:“1”,“附表”:“18次付款”,“年”:“1.5”,“付款金额”:“$4.00”},{“Id”:“2”,“附表”:“24次付款”,“年”:“2”,“付款金额”:“$6.00”},{“Id”:“3”,“附表”:“30次付款”,“年”:“2.5”,“付款金额”:“$8.00”},{“Id”:“4”,“附表”:“36次付款”,“年度”:“3”,“付款金额”:“10.00”},{“Id”:“5”,“附表”:“42次付款”,“年度”:“3.5”,“付款金额”:“12.00”});
//计算快速报价-按钮。。。
$(#buttonCalculateQuickQuote')。在('click',函数(e)上{
var htmlRow=“”;
var$divGridViewer=$(“#divGridViewer”);
$divGridViewer.empty();
var ul=$(“
”);
$。每个(_dataHtmlRow.bulket,函数(i,o){
htmlRow=“”;
htmlRow+=“