jQuery find elements with variable class names using regex?

Question

I am trying to get the number of elements that have a certain class name in them, the problem is, this class name has a variable at the end of it. For example:

<div class="row">
    <div class="col">

    </div>
    <div class="col width-33">

    </div>
    <div class="col">

    </div>
</div>

I have been trying to write a jquery script to get the number of different cols there are and to get the number of columns with a class name of width-xx where XX can be any number.

$('.col').parent().each(function(i){ //The container could be anything
    var numCols = $(this).children('.col').length;
    var numColsWidth = $(this).children('div[class^="width-"].col').length;
    console.log(numCols, numColsWidth);
});

I'd like to output to be 3 1, showing there are 3 total columns and 1 of them has a class named width-xx.

Just as the example above shows, I've tried using the CSS selector, but that doesn't give me anything (outputs 3 0)

I've also tried playing around with RegExp, but I'm not sure how to add this into that

var widthClass = new RegExp("width-");
if(widthClass.test($('.col').attr('class'))){
    //do something
}

So, all I would like to do is count the number of elements that contain the word "width-" in the class.

Why don't you add another has-width class that you can search for exactly, instead of searching for a pattern? — Barmar
– Barmar, Commented May 7, 2014 at 23:57

deweyredman · Accepted Answer · 2014-05-07 23:55:12Z

3

$('[class*="width-"]').length should do it.
this selector allows you to find any element that countains the word "width-" in the class

edited May 7, 2014 at 23:55

answered May 7, 2014 at 23:54

deweyredman

1,4501 gold badge9 silver badges12 bronze badges

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

8 Comments

ntgCleaner Over a year ago

so simple... Thank you! I am using it like so: var numColsWidth = $(this).children('[class*="width"]').length; It takes 10 minutes to "accept an answer" but this will be accepted then

Barmar Over a year ago

This will probably solve your problem, but beware. If you also have a class like fixed-width it will match that as well.

deweyredman Over a year ago

How so? look closely at my solution. there is a hyphen at the end of width, so it will not match fixed-width

ntgCleaner Over a year ago

good point. I will probably just change "width-" to a unique keyword in which case, this should do fine.

ntgCleaner Over a year ago

I think he meant if there's a class like this-width-fixed it will call it out. I think it can be fixed by saying $('[class*=" width-"]') with a space infront of the width

|

Collectives™ on Stack Overflow

jQuery find elements with variable class names using regex?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related