Identify element using multiple classes in random arrangement [duplicate]

Question

Is there a way to get the element using its classes not knowing the arrangement of classes?

I have here a sample HTML

<table>
  <tr class="header first test1">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr class="header first test2">
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr class="h34der third test1">
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

I need to get the element that has header and test1 as its classes

Options I did was the following:

Option #1

$('.header, .test1').css('background','yellow');

However it is incorrect as it color all the elements that has "header" or "test1" class.

Option #2 I saw that this is possible

$("[class*='header first test1']").css('background','yellow');

But my scenario was I do not know the class "first" and the only classes I know are "header" and "test1".

Is there a way to identify the element using multiple classes? Appreciate your help with this.

Here is my fiddle I used for testing: http://jsfiddle.net/ky8d94n6/

$('.header.test1')

Robby Cornelissen
– Robby Cornelissen

2018-06-20 10:18:00 +00:00
Commented Jun 20, 2018 at 10:18 — Robby Cornelissen
– Robby Cornelissen, Commented Jun 20, 2018 at 10:18
Do some research before posting a question.

Vignesh Raja
– Vignesh Raja

2018-06-20 10:20:10 +00:00
Commented Jun 20, 2018 at 10:20 — Vignesh Raja
– Vignesh Raja, Commented Jun 20, 2018 at 10:20

Ankit Agarwal · Accepted Answer · 2018-06-20 10:18:00Z

3

Use $('.header.test1') to select element will class header and test1:

$(document).ready(function(){
    $('.header.test1').css('background','yellow');
});

$(document).ready(function(){
	$('.header.test1').css('background','yellow');
});

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="header first test1">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr class="header first test2">
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr class="h34der third test1">
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

answered Jun 20, 2018 at 10:18

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Identify element using multiple classes in random arrangement [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related