CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ghanshyam.mirani
ghanshyam.mirani

Reputation: 3101

Issue related to getting class name in jquery

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?

Upvotes: 3

Views: 4989

Answers (5)

name
name

Reputation: 457

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. });

Upvotes: 3

Juicy Scripter
Juicy Scripter

Reputation: 25918

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'));
  });
});

Upvotes: 1

Nickz
Nickz

Reputation: 1880

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>

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

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

Upvotes: 0

Russ Ted
Russ Ted

Reputation: 87

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.

Upvotes: 1

Related Questions