Jquery get the specific class name of an element that has multiple assigned classes

Question

I need to read the element class name. I have elements like this:

<article class="active clrone moreclass">Article x</article> <article class="active clrtwo moreclass">Article y</article> <article class="active clrthree moreclass moreclass">Article z</article> <article class="active clrone moreclass">Article xyza</article> 

I need to parse a class name that starts with clr . Therefore, if the second element was pressed, I would need to get clrtwo className.

Answer 1

You can use regular expression matching in the class name of the clicked element to find the class starting with "clr" as follows:

 $("article").click(function() { var matches = this.className.match(/\bclr[^\s]+\b/); if (matches) { // matches[0] is clrone or clrtwo, etc... } }); 

Answer 2

Here is the solution for you:

 $('article').click(function () { var className = this.className.split(' '); for (var i = 0; i < className.length; i+=1) { if (className[i].indexOf('clr') >= 0) { alert(className[i]); } } }); 

http://jsfiddle.net/vJfT7/

There, no matter how you are going to order different classes. The code will warn you about the class name only where "clr" is a substring.

Sincerely.

Answer 3

If this is always the second class name that is of interest, you can do this:

 $("article").click(function () { // split on the space and output the second element // in the resulting array console.log($(this)[0].className.split(" ")[1]); }); 

http://jsfiddle.net/karim79/Z3qhW/

Answer 4

Use the attribute selector to get those that have class names that contain clr .

From there:

• extract class name (string functions)
• analyze position
• define the next element

The last two can be best served by an array of translations if you only had a few classes.

UPDATE

I agree with lonesomeday , it would be much better for you to use the data- * attribute to handle such logic. Using CSS as JavaScript interceptors is a thing of the past.

Answer 5

 <script type="text/javascript"> jQuery(document).ready(function(){ $("article").click(function(){ alert($(this).attr('class').match(/\bclr[^\s]+\b/)[0]); }); }); </script> 

Answer 6

This should jQuery script do what you requested (tested on jsfiddle):

 $(document).ready(function () { function getClrClass(elem) { var classes = elem.getAttribute('class').split(' '); var i = 0; var cssClass = ''; for (i = 0; i < classes.length; i += 1) { if (classes[i].indexOf('clr') === 0) { cssClass = classes[i]; i = classes.length; //exit for loop } } return cssClass; }; $('article').click(function (e) { var cssClass = getClrClass($(this)[0]); alert(cssClass); e.preventDefault(); return false; }); }); 

Hope this helps.

Pete

Answer 7

If you do not need to search for elements based on these classes (for example, do $('.clrtwo') ), it would be better to save the data as an attribute data-clr . This is standard HTML5 compliant and is supported by jQuery using the .data() function.

In this case, I would modify your HTML like this:

 <article class="active moreclass" data-clr="one">Article x</article> <article class="active moreclass" data-clr="two">Article y</article> <article class="active moreclass moreclass" data-clr="three">Article z</article> <article class="active moreclass" data-clr="one">Article xyza</article> 

I would use Javascript as follows:

 $('article.active').click(function() { console.log($(this).data('clr')); }); 

JsFiddle example

Answer 8

http://jsfiddle.net/4KwWn/

 $('article[class*=clr]').click(function() { var token = $(this).attr('class'), position = token.indexOf('clr'); token = token.substring(position, token.indexOf(' ', position)); alert(token); });