Solved

jQuery: Elements with class name beginning with term

Posted on 2012-03-16
4
215 Views
Last Modified: 2012-03-18
Using jQuery, how can I select all elements that have a class name beginning with "hello"?

<!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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('.hello*').each(function(index) {	
  alert($(this).attr('class'));
 });
});

</script>
</head>
<body>

<h1 class="helloH">Heading</h1>
<div class="hello1">1</div>
<div class="hello2">2</div>
<div class="hello3">3</div>
<p class="nomatch">This should not be included</p>
<p class="helloP">ABC</p>
<p class="helloXYZ">XYZ</p>

</body>
</html>

Open in new window

0
Comment
Question by:hankknight
  • 3
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37730646
$('[className^="hello"]').each(function(
0
 
LVL 16

Author Comment

by:hankknight
ID: 37730802
Thanks, but it does not work for me.  Please test this:

<!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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('[className^="hello"]').each(function(index) {
  alert($(this).attr('class'));
 });
});

</script>
</head>
<body>

<h1 class="helloH">Heading</h1>
<div class="hello1">1</div>
<div class="hello2">2</div>
<div class="hello3">3</div>
<p class="nomatch">This should not be included</p>
<p class="helloP">ABC</p>
<p class="helloXYZ">XYZ</p>

</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 37731436
Sorry for the delay I was very busy...
replace className by class :

So use : $('[class^="hello"]')
or : $('*[class^="hello"]')
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>
<title>Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('[class^="hello"]').each(function(index) {
  alert($(this).attr('class'));
 });
});

</script>
</head>
<body>

<h1 class="helloH">Heading</h1>
<div class="hello1">1</div>
<div class="hello2">2</div>
<div class="hello3">3</div>
<p class="nomatch">This should not be included</p>
<p class="helloP">ABC</p>
<p class="helloXYZ">XYZ</p>

</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 37731437
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question