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')
.)
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";
}
});
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>
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>
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.
Jquery Selecting a class when multiple class are present
You can use multiple selectors with jQuery:
$('.content_nav a.pos1_path, .content_nav a.pos2_path').toggleClass('current');
If you want both classes to exist in order to select the element, then you can do something like this:
$('.content_nav a.pos1_path.pos2_path').toggleClass('current');
I've left out the string concatenation for clarity.
Access elements having multiple classes using jQuery
Simply use this selector :
$('.a.b.c')
className
gives you all the classes names separated by spaces ("a b c"). But for css and jquery selectors you can't use "a b c".
What you did was
$('.a b c')
which means "the c elements in b elements in elements of class a".
Related Topics
How to Get Angular to Reload the Same Page But With a Different Argument
Navbar(Menu) Is Getting Overlapped by Body Element
How to Automatically Set Text Box to Uppercase
Children Not Staying Inside Parent Divs
Grid Items Overflow Out of Parent Container Using CSS Grid
Add Line Break Within Tooltips
Next.Js Background-Image CSS Property Cant Load the Image
Htmlspecialchars() Expects Parameter 1 to Be String Array Given
Angular: Using the Ternary Operator in HTML Template
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
Create an Object for Google Chrome
How to Declare a Variable in a Template in Angular
Best Way to Create Video from Html5 Animation
Large File Upload Though HTML Form (More Than 2 Gb)
Set Cellpadding and Cellspacing in Css
Compiling Dynamic HTML Strings from Database
Font-Size and Img Height Too Big At Website Through Smartphone Oneplus 3T