How to use jQuery wildcards with removeClass

Question

I am trying to modify a div that has a given class with the following jquery code:

$("[class^=delay-][class$='+number+']").each(function(index) {
    var delayTime = $(this).attr('class').match(/delay-(\d+)/)[1];
    $(this).removeClass("[class^=delay-][class$='+number+']");
    $(this).data('data-wow-delay', delayTime + 's');
});

Find the divs that has delay-1, or delay-3, and so on...
Get the number as a variable.
Remove the class because I don't need it anymore.
Add to the div data-wow-delay="1s"

I am using the above script but it doesn't seem to succeed in identifying the class.

because removeClass is not built to do that, there is no "selector" as an option. — epascarello, Sep 19 '16 at 16:42
$("[class^=delay-][class$='+number+']") this selector doesn't seem correct...are you trying to match elements with class delay-[number]? — Theodoros Klikas, Sep 19 '16 at 16:45
Yes, I'm trying to find the elements that starts with delay- and ends with a number. @klikas — Kevin Mamaqi, Sep 19 '16 at 16:51
Would $("[class^=delay-]") not work on it's own? Are there other elements with classes that start with delay- but not end with a number? — Theodoros Klikas, Sep 19 '16 at 16:52
You should try a dynamic class selector by using number variable. `$("div.delay-"+number)` — Rajesh Kumar, Sep 19 '16 at 16:53
Your selector won't work if you add any other classes. eg `
`. Instead, get all the classes and loop through them, which also gives you the exact class for `.removeClass()` — freedomn-m, Sep 19 '16 at 17:03

score 2 · Accepted Answer · answered Sep 19 '16 at 17:17

2

jquery wildcards don't work with removeClass

This is correct, because removeClass doesn't use a selector, it uses explicit class names - it's directly equivalent would be addClass, for which it makes no sense to have wildcards.

You can get all the classes and loop through them, giving an exact value for remove class, and, in your case for the delayTime value.

// match where all the classes might contain a relevant one
$("[class*='delay-']").each(function() {

  // Keep 'this' for inside later loop
  var el = $(this);

  // get all the classes
  var classList = el.attr('class').split(/\s+/);

  // loop each class to check if it's one to remove
  $.each(classList, function(index, item) {
    if (item.startsWith("delay-")) {
      el.removeClass(item);
      var delayTime = parseInt(item.substring(6), 10);
      el.data('data-wow-delay', delayTime + 's');
    }
  });
});

You could reduce the code with $.map, but this gives the idea.

Working fiddle: https://jsfiddle.net/hne72o8m/

answered Sep 19 '16 at 17:17

freedomn-m

27,664
8
35
57

It is working for removeClass, but it isn't adding the data-wow-delay, and I can't figure it out. – Kevin Mamaqi Sep 20 '16 at 08:30
How are you reading the data-wow-delay? When you use $.data, it adds/removes `data-` for you, so `$.data("data-wow-delay")` would be the same as `$.prop("data-data-wow-delay")` Try without the "data-" prefix in the data name. – freedomn-m Sep 20 '16 at 09:04
Nothing, it doesn't work in the fiddle either. I want to add data-wow-delay="2s" to the div. – Kevin Mamaqi Sep 20 '16 at 10:17
Works fine in the fiddle. Here's an update: https://jsfiddle.net/hne72o8m/1/ 1 click the div - undefined, 2 click the button to add the data, 3 click the div - shows the value. – freedomn-m Sep 20 '16 at 10:43
*Exactly* how are you reading/looking for "data-wow-delay"? It won't appear in the html, if you're looking the browser debugger (F12). – freedomn-m Sep 20 '16 at 10:44
I was looking with the browser debugger. But I need to add this data to the html in order to use it later with other JS library. Is it possible? – Kevin Mamaqi Sep 20 '16 at 10:52
That's now how `$.data()` works. You could try `.prop` and/or `.attr` which might give you what you need. – freedomn-m Sep 20 '16 at 12:01
It works perfectly using in the last line: `el.attr('data-wow-delay', delayTime + 's');`. Thank you! – Kevin Mamaqi Sep 20 '16 at 16:32

score 0 · Answer 2 · answered Feb 15 '22 at 09:42

0

The removeClass function takes a function argument since jQuery 1.4.

So it can be done with a one-liner. See Best answer in jQuery removeClass wildcard

answered Feb 15 '22 at 09:42

daheile

1
2

How to use jQuery wildcards with removeClass

2 Answers2