jQuery 具有数字 ID 的元素的选择器使用 CSS 转义

Question

我正在尝试使用 jQuery（i 等于 1）为 div id='1' class='std' 赋予红色：

$("#" + 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
            }

Answer 1

IDs cannot start with a number for # CSS selectors.

以下是您需要执行的操作：

jQuery(function($) {
    $('div[id='+i+']').css("background-color", "red");
});

编辑

糟糕，#1 在 CSS 中不起作用，但在 jQuery () 中起作用。因此，没有必要使用 $('div[id=1]').

Answer 2

正如@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');
    });

Answer 3

要匹配以数字或特殊字符开头的 ID，您应该使用 CSS escapes:

$(function() {
  // #1 should be escaped as #
  $("#\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>

这是一个较长的 id 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 + '">...'

jQuery 具有数字 ID 的元素的选择器使用 CSS 转义

jQuery selector for element with numeric id using CSS escapes

css

jquery

css-selectors

编辑 1