How to get list of classes with specific prefix from a result of another selector?

Question

I have a selector that gets all elements by certain condition:

let elements = $("...");

This results in a list of elements whose one of their classes has the same prefix:

some_class_1, some_class_2 and so on.

I then want to hide all elements that have the same class with addition:

some_class_1extra, some_class_2extra

For that I want to extract all the classes with this specific prefix, then iterate them and add the extra text and select the elements I want to hide for each.

How can I do it?

The following did not work:

let classes =  elements.map(function() {
                return (this.className.match(/some_class\d+/) || []).pop();
            }).get();

Roko C. Buljan · Accepted Answer · 2023-01-04 13:38:38Z

1

Firstly: Your regex missed a _ character, use: /some_class_\d+/ instead.

If you have a collection array of jQuery objects (elements) and you want to create a subset collection based on a className prefix, use the .filter() method:

const $elements = $(".box");

// Create a subset collection of .box elements matching a prefix className
const $classes = $elements.filter((i, el) => el.className.match(/some_class_\d+/));

// jQuery collection with two $ objects elements
console.log($classes);

<div class="box some_class_1 cell">one</div>
<div class="box cell">ignore</div>
<div class="box some_class_2 demo">two</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Now that you have that subset, you can change the element's classNames.

Use className and String.prototype.replace() with a small regex to match your specific class string prefix and replace the match with that same match and your desired suffix.
In this example I'm adding _extra as suffix, since it's easier to select in CSS :)

const $elements = $(".box");

// Create a subset collection of .box elements matching a prefix className
const $classes = $elements.filter((i, el) => el.className.match(/some_class_\d+/));

// Iterate the jQuery collection with two $Object elements
// and modify the classNames:
$classes.each((i, el) => {
  el.className = el.className.replace(/\b(some_class_\d+)\b/, "$1_extra");
});

/* Target classes by prefix: */

[class^="some_class_"],
[class*=" some_class_"] {
  background: red;
}


/* Target classes by suffix: */

[class*="_extra "],
[class$="_extra"] {
  background: gold;
}

<div class="box some_class_1 cell">one</div>
<div class="box cell">ignore</div>
<div class="box some_class_2 demo">two</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

edited Jan 4, 2023 at 13:38

answered Dec 28, 2022 at 9:44

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

pileup Over a year ago

Thank you. However it's not exactly what I need in my case. I get list of jQuery objects from the first selector. I need to match each class to the one with extra suffix. Including the numbers. Because I want specifically those with the exact number. In my example it should find the extra elements with numbers 1 and 2 otherwise it will match all classes but I want specifically to those that matched the first jQuery selector

Roko C. Buljan Over a year ago

The above works as expected. As you can see the _extra class is added.

Roko C. Buljan Over a year ago

@Stackerito Oh, makes more sense now. I'll edit the answer. Thanks for your patience

Roko C. Buljan Over a year ago

@Stackerito edited. As you can notice the answer is not much different than before besides the first part regarding .filter(). Hope this answers your question

Roko C. Buljan Over a year ago

Had a typo. Edited again

|

Collectives™ on Stack Overflow

How to get list of classes with specific prefix from a result of another selector?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related