Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 337
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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