• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

Loop over classes using jQuery

Hi,

I would like to loop of an element's classes.
I tried the following :

var clazz = $(this).attr('class');
$(clazz).each(function() {
   ...
});

Didn't work,
Thanks for any help
0
matthew016
Asked:
matthew016
  • 6
1 Solution
 
leakim971PluritechnicianCommented:
What about :


var clazz = $(this).attr('className');
$(clazz).each(function() {
   ...
});

Open in new window

0
 
revteamCommented:
could you please give more information of the elements.
0
 
leakim971PluritechnicianCommented:
miss something, the dot :


var clazz = $(this).attr('class');
$("." + clazz).each(function() {
   ...
});

or

Open in new window

0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
leakim971PluritechnicianCommented:

var clazz = $(this).attr('className');
$("." + clazz).each(function() {
   ...
});

Open in new window

0
 
matthew016Author Commented:
There is no answer.

<div class="hello world">

How to loop over the classes ?
(first iteration, "hello", second "world").

Thanks
0
 
leakim971PluritechnicianCommented:
Use split : http://www.w3schools.com/jsref/jsref_split.asp
So : $(this).attr('className').split(" ");
to get an array of classes

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$(".Hello").click(function() {
			var clazz = $(this).attr('className').split(" ");
			for(var i=0;i<clazz.length;i++) {
				alert("doing the job for class : " + clazz[i]);
				$("." + clazz[i]).each(function() {
					// do what you want
				});
			}
		});
	});
</script>
</head>
<body>
<input type="button" class="Hello World" value="Hllo World" />
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Maybe you prefer something like this :


                  var clazz = $(this).attr('className').replace(/\s/g,",.");
                  $("." + clazz).each(function() {
                              // do what you want
                  });

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$(".Hello").click(function() {
			var clazz = $(this).attr('className').replace(/\s/g,",.");
			$("." + clazz).each(function() {
				alert("doing the job for : " + $(this).attr("id") );
			});
		});
	});
</script>
</head>
<body>
<input type="button" class="Hello World" value="Hllo World" id="me" />
<input type="text" class="Hello" id="Hello" />
<input type="text" class="World" id="World" />
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now