CODEWITHSUNDEEP
javascriptjqueryhtml
Janath
Janath

Reputation: 1248

Add class to previous element

I just want to add class for the button after another class but it's inside of another div. Take a look at this example.

<div class="wrap">
 <button class="one">Click</button>
 <button class="two">Click</button>
</div>
<div class="bottom"></div>

.add-me{
 color:red;
}

In here, I want to add to class button one. But it needs to be applied when bottom class appears.(This is a validation message. So I can't style directly to button one.)

I tried with this way. But it only apply for wrapper div.

$('.bottom').prev('div').first().addClass('add-me');

Here is the fiddle: https://jsfiddle.net/eqhj0vm9/2/

Upvotes: 1

Views: 83

Answers (1)

Eddie
Eddie

Reputation: 26844

You have to use $('.bottom').prev().find(':first-child').addClass('add-me'); to select the prev element's first child.

$(function() {
  $(".activate").click(function(){
     $('.bottom').show();
     $('.bottom').prev().find(':first-child').addClass('add-me');
  });
});
.add-me {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <button class="one">Click</button>
  <button class="two">Click</button>
</div>
<div class="bottom" style="display:none"> BOTTOM CLASS </div>

<br />
<button class="activate">Activate bottom class</button>

Upvotes: 2

Related Questions