Using jQuery, how to select elements with two CSS classes

Navigation
10

I have a div that uses two CSS classes. Here's the HTML: 

<div class="box1"></div>
<div class="box1 destaque"></div>
<div class="box2"></div>
<div class="box2 destaque"></div>
<div class="box3"></div>

I want to select the div that has the classes box1 and destaque (in my example the second div) just .

What I've already tried:

If I do: $('.box1') I select the two divs with class box1 . It's not what I want.

And if I do: $('.destaque') I just selected a div with box1 and another with box2 (which I do not want)

I tried $('.box1 .destaque') but did not select anything.

So how should I mount the jQuery selector to fetch the divs that use the box1 and highlight classes?     

asked by anonymous 11.02.2014 / 17:03

5 answers

14

Take the space: 

$('.box1.destaque')

link

    
11.02.2014 / 17:06
9

In case of only div with .box1 and .destaque : 

$('div.box1.destaque');

In the order of the selectors, the first one can be the desired element, in the example div , then you will specify some characteristics of the element:

  • # for ID
  • . for classes
  • [] for attributes, example: [rel=teste] select <div rel="teste">

At the end it is possible to use : for pseudo selectors (state, as :hover , :active , etc or first child, odd, etc.)

When you add the space in the selector, it identifies that you are wanting to go to the next level, so now they are child elements of the feature you are looking for.

Then $('.box1 .destaque'); will find this: 

<div class="box1">
    <div class="destaque"></div> <-- este elemento foi o único selecionado
</div>

<div class="box1 destaque">
    <div></div>
</div>
    
11.02.2014 / 17:17
6

When you say that an element has multiple properties both in the css as in jquery you enter all the selectors and pseudo classes together

Example: 

#id.classe1.classe2[atributo=valor] {
    display: inherit;
}

The above example would correspond to an element like this: 

<span id="id" class="classe1 classe2" atributo="valor">elemento</span>

If you separate by space you are looking for an element that contains the other.  Example: 

#id .classe1 .classe2 [atributo='valor'] {
    display: inherit;
}

The above example would correspond to an element like this: 

<span id="id">
    <span class="classe1">
        <span class="classe2">
            <span atributo="valor">elemento</span>
        </span>
    </span> 
</span>
    
11.02.2014 / 17:23
3

When you tell the selector: .box1 .destaque you search for the .destaque class within .box1 . Since the element you want to select has both classes, the correct selector is: .box1.destaque , which would return: 

<div class="box1 destaque"></div>

I hope I have helped.

    
11.02.2014 / 17:47
1

$(".box2.destaque").html('Class 1');
$(".box1.destaque").html('Class 2');
.box1{
  color: red;
}

.box2{
  color: blue;
}
<div class="box1"></div>
<div class="box1 destaque"></div>
<div class="box2"></div>
<div class="box2 destaque"></div>
<div class="box3"></div>
    
04.07.2018 / 03:06
Is it recommended to use Linq instead of SQL? have how to put masks in php dynamically?