Why won't this div add a class in jQuery?

Question

I make a $.get call to my db and it returns some HTML (data):

$.get(url, null, function(data) {

The HTML it returns is something like this:

<div id="1234" class="myclass">..more html..</div>

In my callback function, I try to add a class to it (based on some conditionals that I have tested are successfully being reached) like so:

if (someCondition) $(data).addClass('mynewclass' + someId);

Even when someCondition is true, my HTML is not having the mynewclass[someId] class added to it. Is there any reason why this may be that I'm just stupidly overlooking?

Thanks... :\

EDIT

Here's a link to a reproducible example. It's not EXACTLY what i'm doing per se (i'm not using a var outside to get my data, but i'm reproducing the same effect). notice how it's showing 'false' for the test.

Answer 1

The problem is you are creating multiple div objects. The first one you are creating is being discarded. Then a new one is created which does not have the class that was previously added.

Hold on to a reference of the div that was first created and to which the class was applied. Then add that same div to the page.

function(something) {
    var div = $(data).addClass('someClass');
    $('#container').html(div + div.is('.someClass'));
}

However, now we are dealing with an object (div) and not a string, and trying to convert an object to a string will yield "[object Object]". So modify the append function to this:

$('#container').empty();
$('#container').append(div).append(String(div.is('.someClass')));

See your example updated.

Answer 2

jQuery like raw javascript works on DOM. And what you are doing, is trying to manipulate on data( HTML as long string in your case). You need to atleast add HTML data you requested to DOM, before you start doing tricks with it. Your callback should be something like this..

function(data){
  $('#container_to_fit_data').html(data); // Adding to Document
  someId = 1234;
  if (someCondition) 
      $('#'+someId, '#container_to_fit_data').addClass('mynewclass' + someId);
      // or lets see it in simplest form
      // $('#container_to_fit_data').find('#'+someId).addClass('mynewclass' + someId);
}

[ EDIT ]

@Anurag Its true that jQuery is able to manipulate strings data, but its not true that its the case with non-ID transactions.

You can see,

DOM_STR1 = "<div>
              <p>
                 <strong>Strong</strong>
                 <span class='myclass'>Span</span>
              </p>
            </div>"

DOM_STR2 = "<p>
              <strong>Strong</strong>
              <span class='myclass'>Span</span>
            </p>"


$('span.myclass', DOM_STR1) // We find span. Allright.
$('span.myclass', DOM_STR2) // We find span. Cool.

$('p', DOM_STR1) // We find p too. But..
$('p', DOM_STR2) // Empty. Never return p, Why??
$('div', DOM_STR1) // Empty Again. Why??

'div' is present in DOM_STR1, same way 'p' is present in DOM_STR2. Why jQuery can't read the wrapping element, but finds children from string??

So, when data is anyway needed to be on DOM, it makes no sense to manipulate it from string.

Answer 3

@Jason: thats my point, you need to use .addClass on a jQuery object, not raw HTML. Or you need to pattern match 'data', treating it as a string (which it is) and inject your class into the class attribute.

Answer 4

The "data" variable refers to the entire collection of returned information. Something like this should work:

if(someCondition) { $(data).find('#1234').addClass('mynewclass'+someId); }