Adding a class via jQuery

Question

I have some code dynamically created by Sigma, which looks like this:

<div id="myGrid1_headDiv" class="gt-head-div">
<div class="gt-head-wrap">
<table id="myGrid1_headTable" class="gt-head-table">
<tbody>
<tr class="gt-hd-row">
<td class="gt-col-mygrid1-uid">
<div class="gt-inner gt-inner-left" unselectable="on" title="#">
<span>#</span>
<div class="gt-hd-tool"><span class="gt-hd-icon"></span>
<span class="gt-hd-button"></span>
<span class="gt-hd-split" style="cursor: col-resize; "></span></div></div></td>
<td class="gt-col-mygrid1-p_deldate">
<div class="gt-inner gt-inner-left" unselectable="on" title="Planned Delivery Date">
<span>Planned Delivery Date</span>
<div class="gt-hd-tool"><span class="gt-hd-icon"></span>
<span class="gt-hd-button"></span>
<span class="gt-hd-split" style="cursor: col-resize; "></span></div></div></td>

I am trying to target the un-classed spans( # and Planned Delivery Date), in order to style them, with:

  $("div.gt-inner:first-child span")
    {
          $(this).addClass("celltitle");
        };

but it has no effect. As you can see, there other spans around it that I don't want to touch. What am I doing wrong?

===== Final Answer for others using Sigma Grid:

Thanks to @minitech for the pointers, the answer is to add to Sigma Grid's gridOption with:

onComplete:function(grid){ 
 $('div.gt-inner > span').addClass('celltitle'); //add cell title after grid load
}

And what error does that JS code give you (because it's not valid syntax)? — Jasper
– Jasper, Commented Apr 9, 2012 at 23:28
The proper format would be: $("div.gt-inner:first-child span").addClass("celltitle"); — Jasper
– Jasper, Commented Apr 9, 2012 at 23:30
@Jasper: Actually, it is! You can "thank" JavaScript's automatic semicolon insertion for that. — Ry-
– Ry- ♦, Commented Apr 9, 2012 at 23:30
Full doc ready stuff: $(document).ready(function() { var currentWeek = <?php echo $weekno; ?>; // Important: sets the current week number for subsequent JS files $('.spin-button').spinit({min:1,max:53,stepInc:1,pageInc:20, height: 22, initValue: currentWeek }); $("div.gt-inner:first-child span") { $(this).addClass("celltitle"); }; }); — Onyx
– Onyx, Commented Apr 9, 2012 at 23:30

Ry- · Accepted Answer · 2012-04-09 23:28:42Z

1

You've inserted an arbitrary code block in there. You need to use jQuery's .each function and pass your function; jQuery is a library, not a language construct.

$("div.gt-inner:first-child span").each(function() {
    $(this).addClass("celltitle");
});

Or, more concisely, since addClass (like many jQuery functions) implicitly operates on the entire collection:

$('div.gt-inner:first-child span').addClass('celltitle');

answered Apr 9, 2012 at 23:28

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jasper Over a year ago

Since you are doing the same thing to all possible elements in the selection, there is no need for the .each() loop.

Ry- Over a year ago

@Jasper: Yup, I had just added that right before you commented :)

Onyx Over a year ago

Thanks, but still not working, and now I know why... document ready is not truly ready, as I inserted a alert("boo!"); after that code. When boo appears, the titles, etc have not loaded as they are of the Sigma JS, and obviously take a bit of time. Maybe I need to add a delay or something?

Ry- Over a year ago

@Onyx: Sigma JS probably has some kind of callback; you should handle that. Try the documentation, because I have no idea what Sigma JS is.

Onyx Over a year ago

@minitech : thanks, I will check in the APIdocs; it is actually Sigma Grid; a JS based engine for creating a dynamic grid...nice, but a bit inflexible in places!

greatwitenorth · Accepted Answer · 2012-04-09 23:30:45Z

0

I think this should work:

$("div.gt-inner span").addClass("celltitle")

Have a look at http://api.jquery.com/addClass/ for more info.

answered Apr 9, 2012 at 23:30

greatwitenorth

2,4512 gold badges21 silver badges22 bronze badges

Comments

Starx · Accepted Answer · 2012-04-09 23:34:10Z

0

Use it like this

$("div.gt-inner:first-child span").addClass("celltitle");

Demo

edited Apr 9, 2012 at 23:34

answered Apr 9, 2012 at 23:28

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Collectives™ on Stack Overflow

Adding a class via jQuery

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related