jQuery: Wildcard class selector in removeClass

Question

This code snippet works to remove an existing class, before adding a new one, when I specify it directly (ie, 'ratingBlock', 'ratingBlock1', 'ratingBlock2', etc.). But when I use a wildcard selector in the removeClass ('[class^="ratingBlock"]'), it doesn't work. Am I doing something wrong? Thanks.

<style type="text/css">
.ratingBlock {background:gold !important;}
.ratingBlock1, .ratingBlock2, .ratingBlock3, .ratingBlock4, .ratingBlock5 {background:LightGreen;}
</style>

<div class="test block ratingBlock">
Broken
<div><a href="#" class="ratingLink ratingNo-1">1+</a></div>
<div><a href="#" class="ratingLink ratingNo-2">2+</a></div>
<div><a href="#" class="ratingLink ratingNo-3">3+</a></div>
</div>

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
    initRatingWorks();
});

function initRatingWorks() {
    jQuery("a.ratingLink").bind('click', function() {
      var star = jQuery(this);
      var ratingBlock = star.parents('div.test.block');
      var rating = star.attr('class').match(/\d+/);

      if (ratingBlock.attr('class').indexOf('ratingBlock') !== -1) {
          ratingBlock.removeClass('[class^="ratingBlock"]').addClass('ratingBlock' + rating);
      }
      else {
          ratingBlock.addClass('ratingBlock' + rating);
      }

      return false;
    });
}
// ]]>
</script>

`.removeClass` also accepts a function. – lucuma Apr 16 '13 at 14:30 — lucuma, Apr 16 '13 at 14:30

score 5 · Accepted Answer · edited Sep 05 '17 at 05:19

5

$.removeClass() doesn't take a selector as a parameter, only a class name (or class names).

See: Removing multiple classes (jQuery)

So you basiacally need to call:

$.removeClass('ratingBlock1 ratingBlock2 ratingBlock3 ratingBlock4 ratingBlock5');

edited Sep 05 '17 at 05:19

Mehdi Dehghani

10,970
6
59
64

answered Apr 16 '13 at 14:34

MythThrazz

1,629
17
25

This is what I ended up going with, because it worked. I was assuming I didn't have to list all the classes out, but since it was only five classes, and I have a short deadline, this is what I rolled with. Thank you. – mheppler9d Apr 16 '13 at 15:05

score 2 · Answer 2 · edited May 23 '17 at 12:25

2

removeClass takes either a function or a class name. You are trying to provide a css selector. It looks like all you need is:

ratingBlock.removeClass('ratingBlock').addClass('ratingBlock' + rating)

Furthermore you could remove a wildcard like this:

ratingBlock.removeClass (function (index, css) {
    return (css.match (/ratingBlock/g) || []).join(' ');
});

Reference: JQuery removeClass wildcard

edited May 23 '17 at 12:25

Community

1
1

answered Apr 16 '13 at 14:31

lucuma

18,247
4
66
91

When I add the second, wildcard solution to my code snippet example, it does not remove the existing class 'ratingBlock' from the div.test.block, it continues to just add the new class, 'ratingBlock1', 'ratingBlock2', etc. – mheppler9d Apr 16 '13 at 14:57
is there an extra "\" in front of the regex `/\ratingBlock...`? – drzaus Sep 27 '13 at 19:55
Looks like my regex is a little messed up (will fix) although the overall strategy works. – lucuma Sep 27 '13 at 20:41

score 1 · Answer 3 · edited May 23 '17 at 12:25

1

If it makes it any easier, I wrote a plugin for another answer that will strip classes beginning (or ending) with a match, so

ratingBlock.stripClass('ratingBlock-').addClass('ratingBlock-' + rating);

will remove ratingBlock-1 and ratingBlock-2 but not ratingBlock (as long as you include the dash).

Code: https://gist.github.com/zaus/6734731

edited May 23 '17 at 12:25

Community

1
1

answered Sep 27 '13 at 20:38

drzaus

24,171
16
142
201

Bill · Answer 4 · 2013-04-16T14:33:09.010

-1

I think your problem is the quotation marks: I don't think you need them, try omitting them.

'[class^=ratingBlock]'

EDIT:

.removeClass() accepts a class name, not a selector.

You can, however, specify multiple space separated class names, so could try this:

.removeClass('ratingBlock ratingBlock1 ratingBlock2');

http://api.jquery.com/removeClass/

edited Apr 16 '13 at 14:33

answered Apr 16 '13 at 14:27

Bill

3,478
23
42

jQuery: Wildcard class selector in removeClass

4 Answers4

Linked