将类添加到span元素不起作用

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"
    }
]

Answer 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

Answer 2

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

Answer 3

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"
    }
   ]