Selecting an element with multiple classes in jQuery

Question

I want to select an element which has a few classes

Something like this HTML:

<div class="myclass fclass sclass tclass"></div>
<div class="myclass tclass"></div>
<div class="myclass sclass tclass"></div>
<div class="myclass fclass tclass"></div>
<div class="myclass fclass sclass tclass"></div>

I only want to select the element with the myclass tclass classes.

I don't really want to do it in a way where I have to know every class, like this:

$(".myclass.tclass").not(".fclass, .sclass")

In this particular case, you could probably do $('[class="myclass tclass"], [class="tclass myclass"]'), but once it gets over two classes, it gets complicated. — Jared Farrish
– Jared Farrish, Commented Aug 13, 2014 at 1:33
Or maybe if ($('.myclass.tclass').attr('class').split(/\s+/).length == 2) {... has only those two ...} — Jared Farrish
– Jared Farrish, Commented Aug 13, 2014 at 1:36
@Tats_innit I only want the element/s that only have the classes .myclass.tclass — DODOKING
– DODOKING, Commented Aug 13, 2014 at 1:44
@Jared Farrish your first example is interesting it works but only when in that exact so it is limited and as you mentioned it is apparently trickier for more than 2 classes — DODOKING
– DODOKING, Commented Aug 13, 2014 at 1:47

Jared Farrish · Accepted Answer · 2014-08-13 02:03:58Z

2

May not work great as a callback with a named function (if you need it done with different class types), but the demo shows it works:

$('.myclass.tclass').filter(match_exact_class);

function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 2;
}

http://jsfiddle.net/userdude/9bc4qjn4/1

As a single call:

$('.myclass.tclass').filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 2;
});

$('.myclass.tclass.sclass').filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 3;
});

$('.myclass.tclass.tclass.sclass').filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == 4;
});

I suspect you could roll a simple plugin or custom selector and then split on the selector, something like:

var selector = '.myclass.tclass.tclass.sclass',
    sel_match = selector.split('.').length;

$(selector).filter(function match_exact_class() {
    return $(this).attr('class').split(/\s+/).length == sel_match;
});

Simple custom selector:

jQuery.extend(jQuery.expr[':'], {
    matcls: function(elem, i, match){
        return elem.className.split(/\s+/).length == match[3].split(/\s+/).length;
    }
});

console.log($('div:matcls("myclass tclass")'));

http://jsfiddle.net/userdude/9bc4qjn4/4

edited Aug 13, 2014 at 2:03

answered Aug 13, 2014 at 1:42

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

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

2 Comments

DODOKING Over a year ago

thanks this is exactly what I needed, very interesting way of doing. though am surprised others have not come across such a situation before as I searched on here or maybe they are smarter than me and figured same as you.

Jared Farrish Over a year ago

Take a look at the customer selector. Might need some debugging, and could be slow on lots of matches. But it should be a start.

Collectives™ on Stack Overflow

Selecting an element with multiple classes in jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related