Selecting Multiple Classes with Jquery

How can I select an element with multiple classes in jQuery?

If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:

$('.a.b')

The order is not relevant, so you can also swap the classes:

$('.b.a')

So to match a div element that has an ID of a with classes b and c, you would write:

$('div#a.b.c')

(In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)

Selector multiple class in parent

Instead of using string concatenation of generate the selector, just use jQuery's .find() method:

$('.a .b .c').find('.c2, .c3')

If you prefer supplying the parent's context, you can also do this:

var $parent = $('.a .b .c');
$('.c2, .c3', $parent);

This approach will work if you want to bind the click event to the elements without relying on event bubbling:

// Solution 1
$('.a .b .c').find('.c2, .c3').click(function() {
    // Handle click event
});

// Solution 2
var $parent = $('.a .b .c');
$('.c2, .c3', $parent).click(function() {
    // Handle click event
});

In the event that you need to indeed rely on event bubbling, then you will have to check against the event target's parents:

$('body').on('click', '.c2, .c3', function() {  // GUARD: Do not proceed if element is not a child of `.a .b .c`  var $t = $(this);  if (!$('.a .b .c').find($t).length) {    return;  }    // Handle click event  console.log('clicked');});

.c1, .c2, .c3 {  cursor: pointer;  color: green;}
.a .b .c .c1,.foobar .foobaz .foobarbaz .c1, .foobar .foobaz .foobarbaz .c2,.foobar .foobaz .foobarbaz .c3 {  cursor: not-allowed;  color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Elements are child of <code>.a .b .c</code>.</p>
<div class="a">   <div class="b">     <div class="c">        <div class="c1">           C1 (will not fire event)        </div>        <div class="c2">           C2 (will fire event)        </div>        <div class="c3">           C3 (will fire event)        </div>     </div>   </div></div>
<hr />
<p>Elements are not child of <code>.a .b .c</code>.</p>
<div class="foobar">   <div class="foobaz">     <div class="foobarbaz">        <div class="c1">           C1 (will not fire event)        </div>        <div class="c2">           C2 (will not fire event as parents do not match)        </div>        <div class="c3">           C3 (will not fire event as parents do not match)        </div>     </div>   </div></div>

How to select an element with multiple classes in jQuery?

Question is very vague and doesn't explain exactly what you are trying to do but you probably want something like:

 $(this).find("tr.well.answers-list.radio-list").filter(function(){
      if($(this).hasClass('array2')){
           st+="inside array";
      }else{
            st+="not array";
      } 
 });

Selecting multiple classes with jQuery

This should work:

$('.myClass, .myOtherClass').removeClass('theclass');

You must add the multiple selectors all in the first argument to $(), otherwise you are giving jQuery a context in which to search, which is not what you want.

It's the same as you would do in CSS.

How to Select a Button with Multiple classes in Jquery

You are having multiple class hare so two possible case here:

1) If you want union of all class then use

$('.btn, .btn-default, .btn-sm')

2) If you want intersection of all class then use

$('.btn.btn-default.btn-sm')

jQuery selector to select ONLY specific 2 classes, excluding any other?

Second edit: Using just css this selector will select both cases class 'a' in first place or in second place:

$('div[class="a b"],div[class="b a"]')

Edit: You need to filter the selection and exclude elements with a third class:

$('.a.b')
    .filter(function() {
        return this.classList[2] == null;
    });

---

$('.a.b')    .filter(function() {    return this.classList[2] == null;    })    .addClass('red');

div{  height:100px;  width:100px;  background:black;  float:left;}.red{  background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="a"></div><div class="a b"></div><div class="a b c"></div>

jQuery selector: Selecting a certain combination of classes when multiple exist

You could use the CSS3 :not() pseudo class to negate the .d class: (example)

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

---

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

$('.a.b.c').not('.d').each( function() {
    console.log($(this));
});

---

You could also use the attribute selector: (example)

[class="a b c"]

Note that the order always has to be a b c. Just throwing that out there as an option.

JQuery select multiple classes

You want to use , (comma) to separate your selectors:

$('#holder').children('.classA, .classB, .thirdClass, .otherClass')

Demo:

http://jsfiddle.net/mEAFh/1

---

Related Topics