Geek Answers Handbook

JQuery selector for numeric identifier element using CSS screens

I am trying to give a red color 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
            }
+4
source share
3 answers

To match identifiers starting 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>
Run codeHide result

And this is a longer example for identifiers 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>
Run codeHide result

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 + '">...'
+3
source

IDcannot start with a number for selectors # CSS.

:

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

Edit

, #1 CSS, jQuery ( @GuilhermeOderdenge). , $('div[id=1]').

+1

As @ D4V1D said, it's not possible to access #1through CSS, but with jQuery you can - even in a flat way, without div[id=x]. Cm:

var i = 1;

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

Try it yourself: http://jsfiddle.net/wn7njfuc/

If the solution does not work for you, your jQuery may not have started without problems.

EDIT 1

According to OP comment, it uses Jade. So try this right in front of your div:

script.
    $(document).ready(function () {
      var i = 1;
      $('#' + i).css('background-color', 'blue');
    });
+1
source

More articles:


All Articles