CODEWITHSUNDEEP
jquery
Adam Pavlov
Adam Pavlov

Reputation: 307

Add class only for current parent

In the given list, I want when I hit 'click, then the 'red' class should apply only for current 'li' when I hit 'click' under the second 'li' then the class applying both 'li' how to prevent this.

$(".thumb").click(function() {
  $(this).closest(".scroll-demo").addClass("red");
});
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
</ul>

Upvotes: 0

Views: 35

Answers (3)

Sumodh Nair
Sumodh Nair

Reputation: 1676

Just remove the red class from all anchors first and add class to the current targeted anchor.

$(".thumb").click(function(e) {
  e.preventDefault();
  $('.scroll-demo a').removeClass('red');
  $(this).addClass("red");
});
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
</ul>

Upvotes: 0

Haresh Vidja
Haresh Vidja

Reputation: 8496

I think you have to use parent() for add class only to parent element. and remove a class to other element you can use siblings()

$(".thumb").click(function() {
  $(this).parent().addClass("red").siblings().removeClass("red");
});
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
  <li class="scroll-demo">List 1 <a href="javascript:;" class="thumb">Click</a></li>
</ul>

Upvotes: 0

Sooriya Dasanayake
Sooriya Dasanayake

Reputation: 1156

add $(".scroll-demo").removeClass("red");

 $(".thumb").click(function() {
 $(".scroll-demo").removeClass("red");
 $(this).closest(".scroll-demo").addClass("red");
 });

Upvotes: 2

Related Questions