How can I use both OR and .find() in jQuery?

Question

Here is my code:

$('.mycls1 table tr td, .mycls2 table tr td').css('opacity', '.2');

---

Now I want to use two variables instead of .mycls1 and .mycls2 , Like this:

var mycls1 = $(`.mycls1`),
    mycls2 = $(`.mycls2`);

So I have to use .find() to select that, like this:

mycls1.find('table tr td').css('opacity', '.2');
mycls2.find('table tr td').css('opacity', '.2');

See? In this case (using .find() ) forces me to use to two separate lines of code for selecting those two elements.

Anyway, I want to know is it possible to use both .find() and OR ( , ) in the same line?

---

Noted that in my example, declaring two variables and initializing those two elements in them is not effective, but in reality it is. So I just need to learn the concept of how can I do that.

Answer 1

You can use add() to add elements to collection.

mycls1.add(mycls2)....

This will add the elements from mycls2 .

 var mycls1 = $(`.mycls1`), mycls2 = $(`.mycls2`); mycls1.add(mycls2).css('opacity', '.2'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mycls1"> <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </table> </div> <div class="mycls2"> <table> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> </table> </div> 

Answer 2

i think you should try below code

var mycls = $(`.mycls1, .mycls2`);
mycls.find('table tr td').css('opacity', '.2');