使用CSS转义的带有数字ID的元素的jQuery选择器 [英] jQuery selector for element with numeric id using CSS escapes

问题描述

我想使用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>名称：< b> '+ info [i] .nom_etud +'< / b>< / p> < hr>< p> Abs Hours：'+ info [i] .hr_cours +'< / p>'; 
 div_std + ='< p> TPs小时：'+ info [i] .hr_tp +'< / p>< section id =footstd>< button type =buttonname =>标记为不存在< / 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 ）.toString（16））。css（background，green）; 
}）; 
 $（。main）。append（div_std）; //显示学生姓名
} 
  

解决方案

要匹配以数字或特殊字符开头的ids，您应该使用 CSS转义： / p>

 < 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 = //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"> ;</script>  

说到这里，在你的情况下，你可以简单地使用内联样式来改变背景颜色，而不是使用CSS选择器：

  var bgcolor = [red，blue，green] [info [i] .col  -  1] || 透明; 
 var div_std ='< div id ='+ i +'class =stdstyle =background-color：'+ bgcolor +'> ...'
  




I'm trying to give a red color to a div id='1' class='std' using jQuery (i equals 1):

$("#" + i).css("background-color", "red");

code snippet:

           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
            }

解决方案

To match ids that start with numbers or special characters you should use CSS escapes:

$(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>

And this is a lengthier example for 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>

Having said that, in your case you can simply use inline styles to change the background color instead of using CSS selectors:

var bgcolor = ["red", "blue", "green"][info[i].col - 1] || "transparent";
var div_std = '<div id="' + i + '" class="std" style="background-color: ' + bgcolor + '">...'

这篇关于使用CSS转义的带有数字ID的元素的jQuery选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！