jquery remove matching classes?
I have a list of stuff with thing like
<ul>
<li>
<div class="pack1 active1"><span>$3.99</span></div>
</li>
<li>
<div class="pack2"><span>$5.99</span></div>
</li>
<li>
<div class="pack3 active3"><div id="ribbon"><span>40</span></div><span>$6.99</span></div>
开发者_如何学Go</li>
<li>
<div class="pack4"><span>$10.99</span></div>
</li>
<li>
<div class="pack5"><span>$259.99</span></div>
</li>
</ul>
and I want to remove all the active* classes on click. I've tried to do something like $('*[class^="active"]').removeClass() but that isn't working
Any help?
OK, I tested it and this definitely works even if there are more than one "active-something" classes assigned to one element:
$('[class*="active"]').removeClass(function(i, c) {
return c.match(/active\d+/g).join(" ");
});
The 'i' is the index of matched element and 'c' is the value of the class attribute for the matched element so you don't need to "ask" for it again. $("...").removeClass() can remove all classes specified by the value so if there are more than one "active-something" classes assigned to this element we're returning all the occurences from the call to match (using the 'g' option at the end of the regular expression) and then concatenating it so that the actual removeClass function then can process it accordingly.
Something like this might do:
$('*[class~="active"]').removeClass(function() {
var match = $(this).attr('class').match(/active\d{1,}/);
return match ? match[0] : '';
});
Basically, you are returning the classname that match finds
Here is a bit better implementation:
$('.my-selector').removeClass(function(i, c)
{
var matches = c.match(/\S*active\S*/g);
return matches ? matches.join(' ') : false;
});
Try the following
$('[class~="active"]').removeClass();
The ~= syntax matches attributes who's value contains the specified word. Documentation
- http://api.jquery.com/attribute-contains-word-selector/
The ^= syntax used in your question matches attribute values which start with the specified text. This doesn't appear to be what you're looking for.
$('div[class^="active"]').click(function() {
$(this).each(function() {
$(this).removeClass();
});
});
$('div[class*="active"]').removeClass(function() {
return $(this).attr("class").match(/active\d{1}/).join(" ");
});
Your description doesn't say what you want to click on; what should trigger what; or how you want to treat inactive members etc. So...I'll embellished a bit on the functionality.
What you do really depends on how much control you have on the HTML in question. But there's no way to really determine that from your explanation. However, if you want to affect all classes that START WITH "active" then use this my examples event-definition: $('div[class^="active"]')
In the meantime, let's pretend you HAVE some control on the HTML in question.
Here is some food for thought
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>
<style type="text/css">
.list li
{
cursor: pointer;
}
.active
{
color: Green;
}
.inactive
{
color: grey;
}
</style>
<script type="text/javascript">
///<summary>Removes an active row.</summary>
function deactivate() {
$(this).parent().remove();
}
///<summary>Change an inactive row to an active row.</summary>
function activate() {
$(this).removeClass('inactive').addClass('active').click(deactivate);
}
$(document).ready(function() {
// Also, just as an extra, use "context" to limit the scope of any jQuery selector-search.
// That way on large pages your selector doesn't search through the whole page,
// it only searches the tables HTML.
// Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger');
var context = $('ul.list');
$('div.inactive', context).click(activate);
$('div.active', context).click(deactivate);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul class="list">
<li>
<div class="pack1 active">
<span>$3.99</span>
</div>
</li>
<li>
<div class="pack2 inactive">
<span>$5.99</span>
</div>
</li>
<li>
<div class="pack3 active">
<div id="ribbon">
<span>40</span> @ <span>$6.99</span>
</div>
</div>
</li>
<li>
<div class="pack4 inactive">
<span>$10.99</span>
</div>
</li>
<li>
<div class="pack5 inactive">
<span>$259.99</span>
</div>
</li>
</ul>
</form>
</body>
</html>
How many different active classes are there? You could just do...
for (var x=1; x<=5; x++)
$('.active' + x).removeClass('active' + x);
JSFiddle Live Demo
加载中,请稍侯......
精彩评论