Return First Part of HTML Class Name

Question

I have a number of table rows that are each assigned several classes. And one of those classes will be IndexN, where N is a number from 0 to 5 or so.

What is the easiest way to get the value of N for a given row.

I know I can use hasClass() but that would require calling it for all possible values of N. I also assume I can simply get the value of the class attribute but this will include the other classes as well.

Is there a better way?

A better way would to use a data-index="n" attribute. It would save you a lot of hassle. — pimvdb
– pimvdb, Commented Jan 7, 2013 at 18:47
Yes, but I have to work with the attributes in the HTML I'm using. — Jonathan Wood
– Jonathan Wood, Commented Jan 7, 2013 at 18:48
Why not use the rowIndex property? w3schools.com/jsref/prop_tablerow_rowindex.asp — Sajjan Sarkar
– Sajjan Sarkar, Commented Jan 7, 2013 at 18:49
"index" methods don't make sense, I assume, because the elements could be out of order. <br class="index424"><br class="index8">... — No Results Found
– No Results Found, Commented Jan 7, 2013 at 18:54

mrbinky3000 · Accepted Answer · 2013-01-07 19:13:19Z

4

$('tr[class*=index]').each(function(){
  var cn = /\bindex(\d+)\b/.exec($(this).attr('class'));
  console.log(cn[1]);
});

console.log output is 1, 2, 3, 4

index[x] doesn't need to be listed first. It can be anywhere in the class string

edited Jan 7, 2013 at 19:13

answered Jan 7, 2013 at 19:04

mrbinky3000

4,3918 gold badges45 silver badges56 bronze badges

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

9 Comments

Jonathan Wood Over a year ago

Why cn[1]? What is in cn[0]?

mrbinky3000 Over a year ago

cn[0] is "index1" or the whole matched string. cn[1] is just the number 1 or the digit we matched in parenthesis (\d+). I thought he just wanted the digit.

Jonathan Wood Over a year ago

I like this. The weakest part is that it wouldn't distinguish between "Index1" and "Windex1", but that seems unlikely to be an issue.

mrbinky3000 Over a year ago

fixed it by adding \b or "word boundary" to the regex.

mrbinky3000 Over a year ago

You might want to move the index value to the "id" attribute. <tr id="index1" class="yadda yadda yadda"> or to a data attribute like <tr data-index="1" class="bloop beep bop">

|

pimvdb · Accepted Answer · 2013-01-07 18:57:31Z

3

What you can do is matching className with a regexp. But it's not very elegant:

$("tr").each(function() {
  // surround with spaces so that each class name can be matched with spaces
  var match = / index(\d+) /g.exec(" " + this.className + " ");
  var index = match[1];
});

className is a space-separated string of classes that the element has:

"foo"
"foo bar"

By surrounding with spaces, they become:

" foo "
" foo bar "

Note that with the surrounding spaces, each class name can be matched against " foo " with the correct result.

edited Jan 7, 2013 at 18:57

answered Jan 7, 2013 at 18:50

pimvdb

155k80 gold badges313 silver badges358 bronze badges

5 Comments

Jonathan Wood Over a year ago

Would this work if there are no spaces before and after the class name in the markup?

pimvdb Over a year ago

@Jonathan Wood: Yes, precisely because they're prepended/appended in this code (so "index1" will become " index1 " before matching, so that it works).

cowls Over a year ago

+1 perhaps you could combine with roxons answer below and apply this function only to: tr[class^=index]

pimvdb Over a year ago

@cowls: But that will only select rows that have index as the first item in the class list.

pimvdb Over a year ago

@Jonathan Wood: It's basically just the class attribute from HTML. But if you use .addClass etc, then className gets updated automatically.

Roko C. Buljan · Accepted Answer · 2013-01-07 19:27:49Z

1

use the *= that will match for "contains" the specific word

$('tr[class*=index]')

and to retrieve the Number ( [0] if index is the first class!):

var classIndex = this.className.split(' ')[0].split('index')[1];

http://jsbin.com/awacet/1/edit

OR if you are sure no other NUMBERS are in the classes but that one, than it's really simple:

 var classIndex = this.className.replace(/\D/g, '' );

if you have e.g: <tr class="something index4 footer barbeque"></tr> this will return 4

http://jsbin.com/awacet/2/edit

edited Jan 7, 2013 at 19:27

answered Jan 7, 2013 at 18:47

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

No Results Found Over a year ago

You probably would want *= in case the class is not the first one, example: jsfiddle.net/swE7b

Jonathan Wood Over a year ago

Thanks but I'm not sure this addresses the issue. I already have the row. I want to get the value of N for that row. How would this help me?

arhea · Accepted Answer · 2013-01-07 18:51:37Z

-2

$('.class-1')[0].className.indexOf('class-') !== -1

answered Jan 7, 2013 at 18:51

arhea

4542 silver badges5 bronze badges

2 Comments

Jonathan Wood Over a year ago

I have no idea what this does, or how it would help in this task.

Sajjan Sarkar Over a year ago

@arhea this code only tests whether the element has a class starting with class- .. it doesnt get the row number that the OP is asking for

Collectives™ on Stack Overflow

Return First Part of HTML Class Name

4 Answers 4

9 Comments

5 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

5 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related