我正试图使用jQuery(I等于1)为div id="1"class="sd"赋予红色:
$("#" + i).css("background-color", "red");
代码片段:
for(var i=0 ; i< info.length ; i++ ){
var div_std ='<div id="'+i+'" class="std"> <p> Name :<b> '+info[i].nom_etud + ' </b></p> <hr><p> Abs Hours : '+info[i].hr_cours +'</p>' ;
div_std+='<p> TPs Hours : '+info[i].hr_tp+'</p><section id="footstd"><button type="button" name="">Mark as absent</button><img src="images/abs.png"></section>'+'</div>';
if(info[i].col == 1)
{
$(function() {
$("#\" + i.toString().charCodeAt(0).toString(16)).css("background", "red");
});
}
else if(info[i].col == 2)
$(function() {
$("#\" + i.toString().charCodeAt(0).toString(16)).css("background", "blue");
});
else if(info[i].col == 3)
$(function() {
$("#\" + i.toString().charCodeAt(0).toString(16)).css("background", "green");
});
$(".main").append(div_std); //Display the students name
}
要匹配以数字或特殊字符开头的id,应该使用CSS转义符:
$(function() {
// #1 should be escaped as #31
$("#\31").css("background", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="1">div</div>
这是ids 1的一个更长的例子。。。100:
$(function() {
var i, selector, $div;
for (i = 1; i <= 100; i++) {
selector = "#\" + i.toString().charCodeAt(0).toString(16) + " " + i.toString().substr(1);
$div = $('<div id="' + i + '"><code>id: ' + i + ', selector: ' + selector + '</code></div>').appendTo("body");
$(selector).css("background", "green");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
话虽如此,在您的情况下,您可以简单地使用内联样式来更改背景颜色,而不是使用CSS选择器:
var bgcolor = ["red", "blue", "green"][info[i].col - 1] || "transparent";
var div_std = '<div id="' + i + '" class="std" style="background-color: ' + bgcolor + '">...'
正如@D4V1D所说,通过CSS访问#1
是不可能的,但有了jQuery,你可以——即使是在没有div[id=x]
的情况下,也可以用平面的方式。参见:
var i = 1;
$('#' + i).css('background-color', 'red');
试试看:http://jsfiddle.net/wn7njfuc/
如果解决方案不适合您,那么您的jQuery可能没有无缝启动。
编辑1
根据OP的评论,他正在使用Jade。所以,在你的div之前试试这个:
script.
$(document).ready(function () {
var i = 1;
$('#' + i).css('background-color', 'blue');
});
ID
s不能以#
CSS
选择器的数字开头。
以下是您需要做的操作:
jQuery(function($) {
$('div[id='+i+']').css("background-color", "red");
});
编辑
糟糕的是,#1
在CSS
中不起作用,但在jQuery
中起作用(根据@GuilhermeDerdenge的回答)。因此,不需要使用$('div[id=1]')
。