Adding class to span element is not working

Question

I am receiving a large JSON object having large volume of data in ajax success method but when i am iterating over the JSON list and want add individual class to each element things are not working.

The code snippet i am pasting here is inside ajax success method

$.each(data, function(index,jsonObject){
    console.log(jsonObject.spanId+":"+jsonObject.status)
    if(jsonObject.status != null && jsonObject.status != undefined){
        if(jsonObject.status == "Available"){
        $('#'+jsonObject.spanId).addClass("availableTime");
        }else{
        $('#'+jsonObject.spanId).addClass("vacantTime");
        }
    }
});

I have tried lot but not able to accomplish, please help me.

I am adding chunk of my json object

[
    {
        "spanId": null,
        "status": null
    },
    {
        "spanId": null,
        "status": null
    },
    {
        "spanId": "25_31_15:00",
        "status": "Available"
    },
    {
        "spanId": "25_31_15:30",
        "status": "Available"
    },
    {
        "spanId": "25_31_16:00",
        "status": "Available"
    },
    {
        "spanId": "25_31_16:30",
        "status": "Available"
    },
    {
        "spanId": "25_31_17:00",
        "status": "Available"
    }
]

Provide a chunk of your data or nobody will be able to help you. The jquery addClass method do work. — Florian F., Dec 31 '13 at 14:02
Despite `:` being invalid here, have you tried `$(document.getElementById(jsonObject.spanId))` instead? — Ja͢ck, Dec 31 '13 at 14:19

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

You span ids are not advised and it may be what is not working.

Plus : for selectors is a reserved word for pseudo classes.

Source

edited May 23 '17 at 10:32

Community

1
1

answered Dec 31 '13 at 14:11

Florian F.

4,700
26
50

Yes unfortunately its not working due to : in the selectors, now i removed it and its working Thanks !!! – BIdesi Dec 31 '13 at 14:19
All the rules are in the stackoverflow post i linked in my answer. – Florian F. Dec 31 '13 at 14:22
Yea "perfectly" with quotes as you can [escape them in the jquery selector](http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/) but it is not advised anyway.. – Florian F. Dec 31 '13 at 14:25

Ja͢ck · Answer 2 · 2013-12-31T14:36:44.767

Contrary to what you might expect, the use of colons in ids is okay, though only HTML5 started to accept ids starting with a digit. For better interoperability, it's recommended to start ids with a letter and not use colons in the first place.

That said, if you must use colons in your identifiers, you must escape them when you use them as part of a selector:

$('25_31_17\\:00') // this works fine

Alternatively, if you're going to find elements by their identifier, you might also want to consider:

$(document.getElementById(jsonObject.spanId)) // this will work too

Rob Sedgwick · Answer 3 · 2013-12-31T14:37:58.933

H i, just missing a couple of things and data is in the wrong place ( by the looks )

try running this :

  $.each(data, function(index){
      console.log(data[index].spanId+":"+data[index].status)

  });

notice that you need to tell the loop which array item to reference :

  data[index]

and that the 'each' is looping over the array:

   $.each(data, function(index){ ...

EDIT with data ref:

  var data =  [
   {
    "spanId": null,
    "status": null
   },
   {
    "spanId": null,
    "status": null
   },
   {
    "spanId": "25_31_15:00",
    "status": "Available"
   },
   {
    "spanId": "25_31_15:30",
    "status": "Available"
   },
   {
    "spanId": "25_31_16:00",
    "status": "Available"
   },
   {
    "spanId": "25_31_16:30",
    "status": "Available"
    },
    {
    "spanId": "25_31_17:00",
    "status": "Available"
    }
   ]

Adding class to span element is not working

3 Answers3