I have the following code :

JS:

var test2 = ['RMrpi5Z8doc','JIPbUaqyYx0','MbjXYg0YRmw'];

    $('tr').live('click', function(event){
      $($(this).attr('class').split(' ')).each(function() { 
        if (!((this == 'even') || (this == 'odd'))) {
            alert(jQuery.inArray(this, test2));
            if (this == 'RMrpi5Z8doc') {
              alert(this);
            }
        }   
      });
    });

HTML :

  <table>
   <tr class="odd RMrpi5Z8doc">
     <td>Kite</td>
     <td>Just Like Vinyl</td>
     <td>Audiotree</td>
   </tr>
  </table>

inArray does not match and returns -1. The if statement matching the literal string does match. If I substitute in the literal in inArray, that also matches.

I've seen a post which said that jQuery attr does not return strings anymore, but looking at the documentation for attr on the jQuery site seems to say it does.

Perhaps I should be going about this an entirely different way?

I have the following code :

JS:

var test2 = ['RMrpi5Z8doc','JIPbUaqyYx0','MbjXYg0YRmw'];

    $('tr').live('click', function(event){
      $($(this).attr('class').split(' ')).each(function() { 
        if (!((this == 'even') || (this == 'odd'))) {
            alert(jQuery.inArray(this, test2));
            if (this == 'RMrpi5Z8doc') {
              alert(this);
            }
        }   
      });
    });

HTML :

  <table>
   <tr class="odd RMrpi5Z8doc">
     <td>Kite</td>
     <td>Just Like Vinyl</td>
     <td>Audiotree</td>
   </tr>
  </table>

inArray does not match and returns -1. The if statement matching the literal string does match. If I substitute in the literal in inArray, that also matches.

I've seen a post which said that jQuery attr does not return strings anymore, but looking at the documentation for attr on the jQuery site seems to say it does.

Perhaps I should be going about this an entirely different way?

• javascript
• jquery

• 1 what are you trying to achieve? – Michal Klouda Commented Oct 22, 2012 at 13:58
• 2 "Perhaps I should be going about this an entirely different way?" I would suggest not using class to store this value. You could instead use data-id or if they are unique, simply id should work. – Kevin B Commented Oct 22, 2012 at 14:00
• 2 While you're thinking of reworking code, note that .live() has been deprecated for some time now. If you're working with up-to-date jQuery you should be using the .on() API. – Pointy Commented Oct 22, 2012 at 14:09

3 Answers 3

You're using the wrong each. You meant jQuery.each, the general-purpose iterator:

$.each($(this).attr('class').split(' '), function ...);

not each, the instance function on jQuery instances:

$($(this).attr('class').split(' ')).each(function ...); // Wrong

In particular, what's happening is this part of the above:

$($(this).attr('class').split(' '))

...calls $() with the array, which doesn't do what you want it to do. :-)

It is indeed a type mismatch. If you switch to if (this === 'RMrpi5Z8doc') {, the second alert will no longer fire. Using this.toString() will solve this problem, as will the following:

$.each($(this).attr('class').split(' '), function() { 
    //...etc.

This is, by the way, an unusual way of doing this. Normally, you would test for a class with the hasClass method:

$('tr').on('click', function() {
    if ($(this).hasClass('odd')) {
        //...

Also, as raina77ow notes, there are the :even and :odd pseudoclasses:

$('tr').on('click', function() {
    if ($(this).is(':odd')) {
        //...

This way, you could dispense with your odd and even classes entirely.

I've refactored this using :

$(document).on('click', 'tr', function(){
  alert(jQuery.inArray($(this).attr('id'), test2));
}

Which seems to work. I have moved the class name to an id field since I'm not using these identifiers for any stylesheets, they really are ids.