Issue related to getting class name in jquery

Question

I have the following HTML:

<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
  <tr class="row1">
    <td></td>
  </tr>
  <tr class="row2">
    <td></td>
  </tr>
</table>

and the following jQuery :

<script>
$(document).ready(function () {
  var Tabletr= $(".ChatBox > tbody >  tr:odd");
});
</script>

how can i get the class name of Odd row in Jquery?

possible duplicate of [Get class name using jQuery](http://stackoverflow.com/questions/2400386/get-class-name-using-jquery) — Brad, Feb 27 '12 at 05:25

name · Answer 1 · 2012-03-09T05:58:14.693

3

Simply var $elems = $("table.ChatBox tr:odd"); should work.

To get their classes(heads up to Juicy Scripter below),

$elems.each(function(){   console.log(this.className); //do whatever with the class names. });

edited Mar 09 '12 at 05:58

answered Feb 27 '12 at 05:26

name

457
4
10

This is a way to get elements not their `class`. – Juicy Scripter Mar 05 '12 at 09:47

Juicy Scripter · Answer 2 · 2012-03-05T09:45:39.603

1

jQuery itself doesn't provide direct way to retrieve DOM element class other than using attr method of jQuery or className property for element in JavaScript after you get the elements:

$(document).ready(function () {
  var Tabletr= $(".ChatBox > tbody >  tr:odd");

  var firstElementClass = Tabletr.eq(0).attr('class');

  // Previous is the same as
  var firstElementClass = Tabletr.get(0).className;

  // Due to fact that Tabletr may contain more that one row you may want to iterate and collect classes names.
  var classes = [];
  Tabletr.each(function(){
    classes.push(this.className);
    // OR
    classes.push($(this).attr('class'));
  });
});

edited Mar 05 '12 at 09:45

answered Feb 27 '12 at 05:29

Juicy Scripter

25,778
6
72
93

Hey, sorry for the delayed response. Jquery actually does have some quite popular methods for manipulating classes and other attributes on elements, such as the .class(), .addClass() and .removeClass() methods. All of it is fairly comprehensively documented over at http://api.jquery.com/ . – name Mar 05 '12 at 04:57
@Jerry, there is no `class()` method in jQuery (see [Class Attribute in documentation](http://api.jquery.com/category/manipulation/class-attribute/)), there is methods that allow you to manipulate `class` attribute values, but there is no direct way to get `class` name other than `attr('class')` (and this is stated in my answer) – Juicy Scripter Mar 05 '12 at 09:43
Sorry, my mistake. I thought .class() was a shortcut for .attr('class'). Weird. I was also under the impression that the OP wanted the odd _elements_ to start with, as his selector as shown wouldn't work since he had no tbody tag. Fixing ans. Some browsers automatically add this in but I'm not sure if jquery sees it unless it's spelled out in the HTML. So the selector would be `'chatbox tr:odd'`, just in case. – name Mar 09 '12 at 05:53

score 1 · Answer 3 · answered Feb 27 '12 at 05:30

Try this:

<script>
    $(document).ready(function () {
        var Tabletr= $(".ChatBox").children("td:odd").attr("class");
        alert (Tabletr);
        }
    });
</script>

You can also use :first instead of :odd if you wish to get the first td class.

Ken Redler · Answer 4 · 2012-02-27T05:35:36.640

You can simplify your selector:

var Tabletr = $(".ChatBox tr:odd")

This gives you a jQuery object for each odd row in your table. If there's just one such row, you could do this:

var Tabletr = $('.ChatBox tr:odd')[0].className; // -> "row2"

But if there are multiple rows, you need something more like this:

var TableRowClasses = $(".ChatBox tr:odd").map( function(){
  return this.className;
}).get();

This gives you an array with every odd row's class as an element. So you'd end up with an array like this:

["row2","row4","row6"] // confusing odd-row classnames notwithstanding

score 0 · Answer 5 · answered Feb 27 '12 at 05:38

I've look at your code and the following changes gave me the result your after.

  <table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
        <tr class="row1">
        <td></td>
        </tr>
        <tr class="row2">
            <td></td>
        </tr>

       <tr class="row3">
            <td></td>
        </tr>

       <tr class="row4">
            <td></td>
        </tr>
    </table>

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
     $(function () {

         $(".ChatBox tr:odd").each(function () {
             //test
             alert($(this).attr("class"));
         });

     });
 </script>

Issue related to getting class name in jquery

5 Answers5