I recently found myself in a position where I had to sort through the classes of rows on a table where the classes where defined directly via a value from the database. Unfortunately for me, the database entry had words combined with a slash between them. Luckily I found out about jQuery’s Attribute Contains Selector, which allows you to find a class based on a word it contains. It works very similarly to a MySQL LIKE statement, or like fuzzy search on classes.

Let’s take a look at an example (which was very similar to the one I actually found myself) to illistrate how the Attribute Contains Selector works. In this example, you have a hockey camp table where the rows classes’ are defined by their age group, but since they are taken directly out of the database they look like this:

In this example we want to create a <select> element that will allow us to filter the camps by age. Since the classes are combined into one word, we need to use jQuery’s Attribute Contains Selector to find the camps that contain each individual age group.

This example will require some knowledge of how jQuery works, so if you don’t know much about jQuery please go check out my previous post that offer an introduction to jQuery (there is also a part 2, part 3 and part 4).

Using the attribute contains selector is very similar to using a regular selector in jQuery, but there is a little more syntax involved. You have to use the following syntax:

where attribute is the attribute name of what you want to find and value is the string you want the attribute to contain. In our example the attribute will be class because we are searching for a class that contains a certain age group string, but you can in fact search other things like name or id.

Let’s take a look at an example of what one of our attribute contains selector’s will end up looking like:

As you can see in this example, we preface the actual attribute contains selector with tr to search only for rows that contain that class. This is an extremely common practice with jQuery selectors so it should look familiar to you.

You’ll see that we have used class as our attribute and then filled in the value with Novice. We will use this type of selector to show only the rows that are for the Novice age group.

The only thing we really need to do to get this selector full working is replace the Novice that we typed in with the value of the <option> from the <select>. To do this, use the following code:

We are now grabbing the value of the <option> from the <select> and inserting it as the value for our attribute contains selector. That’s all there really is to it in the end, you can see the full working example below:

See the Pen jQuery Attribute Contains Selector Example by Alex Dobson (@SufferMyJoy) on CodePen.

The code for the jQuery ends up a little different, but all the changes do is narrow down our search to only the table body to ensure the headers don’t get hidden. We also add the jQuery to hide and show the different rows. When you look over the example above you should see what I mean and hopefully you’ll be able to re-purpose it for your own use!

As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.