jQuery select class contain part of name

in my html i have the following
<li class="Bleu1" id="2">
<li class="Bleu1Selected" id="3">
<li class="yallow1Selected" id="4">
<li class="yallow1" id="5">

i want jQuay that will select all (li) with class name contain (Selected)
and then reset the class to be without (Selected)
Like this

<li class="Bleu1" id="2">
<li class="Bleu1" id="3">
<li class="yallow1" id="4">
<li class="yallow1" id="5">
palservAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
You may use : http://api.jquery.com/attribute-contains-selector/


$("li[class*='Selected']").each(function() {
				prevClass = $(this).attr("className");
				nextClass = prevClass.replace("Selected","");
				$(this).removeClass(prevClass).addClass(nextClass);
			});

Open in new window

0
 
mcuk_stormCommented:
Do you have control of the markup? If so i would suggest using multiple classes instead of a compound one i.e.
<li class="Bleu1 Selected">

You can then identify this through css/jQuery like

li.Bleu1.Selected

then if you want to remove selected you can do $('li.Bleu1.Selected').removeClass('Selected');

This makes selecting all Selected ones alot easier and likewise all Bleu1 ones easier
0
 
mcuk_stormCommented:
With the above comment, an example to reset all selected would simply be $('.Selected').removeClass('Selected');
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
leakim971PluritechnicianCommented:
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() {
		$("#but").click(function() {
			$("li[class*='Selected']").each(function() {
				prevClass = $(this).attr("className");
				nextClass = prevClass.replace("Selected","");
				$(this).removeClass(prevClass).addClass(nextClass);
			});
		});
	});
</script>
</head>
<body>
<input type="button" id="but" value="click me" />
<ul>
    <li class="Bleu1" id="2">Hello</li>
    <li class="Bleu1Selected" id="3">Hello</li>
    <li class="yallow1Selected" id="4">Hello</li>
    <li class="yallow1" id="5">Hello</li>
</ul>
</body>
</html>

Open in new window

0
 
hehdaddyConnect With a Mentor Commented:
Simple:

$("li[class*='Selected']").each(function()
{
    var class = $(this).attr("class");
    class.replace("Selected", "");
    $(this).attr("class", class);
});

Give this a go!
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.

All Courses

From novice to tech pro — start learning today.