CODEWITHSUNDEEP
jquerycss
blueSky
blueSky

Reputation: 247

change css of next div having a class

Click on title should change css of next div having target class.

$('.title').on('click', function(){
    $(this).next('.target').css('background', 'gold');
});
.title{cursor:pointer;}
.target{background:lightgreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='title'>TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Upvotes: 0

Views: 568

Answers (3)

Mawia HL
Mawia HL

Reputation: 3665

Using the nextAll() is smarter and less code.

$('.title').on('click', function() {
  $(this).nextAll('.target').first().css('background', 'gold');
});
.title {
  cursor: pointer;
}

.target {
  background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title' data-id="1">TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title' data-id="122">TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title' data-id="11">TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Upvotes: 0

Vishnu Prasanth Gangisetty
Vishnu Prasanth Gangisetty

Reputation: 1233

You should use $(this).next().next('.target'). Because

  • $(this).next() is the <br> tag
  • so $(this).next().next('.target') will give you the:
    <div class='target'>targ</div>

Try the following code, it should work fine.

$('.title').on('click', function(){
    $(this).next().next('.target').css('background', 'gold');
});
.title{cursor:pointer;}
.target{background:lightgreen;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='title'>TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Upvotes: 3

Arup Rakshit
Arup Rakshit

Reputation: 118271

As per the documentation of .next()

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

So in your case the immediately following sibling is <br>, which doesn't have the class .target. Thus you are not seeing any effect of the click, as no gold background color is being applied. But you could write the code as:

$(document).on("click", ".title", function(e) {
  $(e.target)
    .find("~ .target:first")
    .css("background", "gold");
});
.title {
  cursor: pointer;
}

.target {
  background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title' data-id="1">TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title' data-id="122">TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title' data-id="11">TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Upvotes: 1

Related Questions