JQuery selector: choosing a specific combination of classes in multiple existence

Question

I already tried to do some research and did not find anything, but if I missed the answer, please tell me. Basically I have several elements with several classes each, but the combinations are unique. I want to select a specific combination of classes, but not other elements that have these elements in combination with others.

I would like to know if this selector exists in jQuery or is there some other way to accomplish what I explain. See the example below:

<div class="abc"></div> <div class="abcd"></div> <div class="abcd">/div> 

When trying to register only an element with abc classes, I tried to use:

 $('.abc').each( function() { console.log($(this)); } 

output:

 [ <div class="abc">...</div> , <div class="abcd">...</div , <div class="abcd">...</div> ] 

I am looking for a way out:

 [ <div class="abc">...</div> ] 

Any guidance is appreciated. Thanks!

Answer 1

You can use the CSS3 :not() pseudo- class to undo the .d : class (example)

 $('.abc:not(.d)').each( function() { console.log($(this)); }); 

---

jQuery also has a .not() method: (example)

 $('.abc').not('.d').each( function() { console.log($(this)); }); 

---

You can also use attribute selector: (example)

 [class="abc"] 

Note that the order must always be abc . Just throw it away as an option.

Answer 2

I don’t believe that you can do this with direct CSS selectors without using: do not list all other classes that you want to exclude, or real gymnastics with [class =]. However, you can select all elements with .abc classes, and then filter out any elements that contain more than three elements in the class list:

 var $abcDivs = $('.abc').filter(function(i, $elem){ return $elem.attr("class").split(' ').length == 3; }) 

More generally:

 function exactClass(classList) { return $(classList.join('.')).filter(function(i, $elem){ return $elem.attr("class").split(' ').length == classList.length; }); } 

Answer 3

I was looking for something similar a while ago, but I was not able to figure out which classes I did not need (since they were added dynamically). Thus, instead of eliminating unwanted classes with not() , I did this to match elements only with those classes that I know.

 var classes = ['a','c','b']; $('.'+classes.join('.')).each( function(){ var cl = $(this).attr('class'); for(var i in classes) { cl = cl.split(classes[i]).join(''); } if(cl.replace(/\s+/, '') === ''){ $(this).addClass('blah'); } }); 

 .blah{ font-size:30px; color : red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="abcd">Foo</div> <div class="cba">Bar</div> <div class=" abc">Hello</div> <div class=" ab">World</div> 

JSFiddle . As a method:

 function el(c){ var a = []; $('.'+c.join('.')).each(function(){ var k = $(this).attr('class'); for(var i in c) k=k.split(c[i]).join(''); if(k.replace(/\s+/,'')==='') a.push(this); }); return a; } // usage: $(el(['a','c','b'])).addClass('blah');