使用jQuery更改单击的div内的锚标记的css

Question

I have multiple div with classes

.product_wishlist

I want to change the color of the particular anchor tag on which the user click inside this div, but now all the anchor tag colors which are inside .pw div are changed. Is it possible to add selected css to the clicked element. Please help to sort out my issue.

 $(document).ready(function() { $(document).on('click','.pw',function(e){ $('.pw > a').css('background-color', 'green'); }); }); 

 .product_wishlist > a { background-color: #e91e63; height: 30px; position: absolute; right: -32px; text-align: center; top: 15px; width: 30px; -webkit-transition-duration: 500ms; transition-duration: 500ms; z-index: 9; } .wishlish-selected > a { background-color: black; height: 30px; position: absolute; right: -32px; text-align: center; top: 15px; width: 30px; -webkit-transition-duration: 500ms; transition-duration: 500ms; z-index: 9; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist</a> </div> 

Answer 1

Use this to refer the current element and .find() the anchor element from that:

Change

$('.pw > a').css('background-color', 'green');

To

$(this).find('a').css('background-color', 'green');

 $(document).ready(function() { $(document).on('click','.pw',function(e){ $(this).find('a').addClass('wishlish-selected') }); }); 

 .wishlish-selected{ background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 1</a> </div> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 2</a> </div> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 3</a> </div> 

As you already specifying the anchor element after the class in the CSS selector, you do not need to find anchor element again in jQuery, simply add the class to the current element. Also, there is an issue with position: absolute , to show the output I ignored that property here:

 $(document).ready(function() { $(document).on('click','.pw',function(e){ $(this).addClass('wishlish-selected') }); }); 

 .product_wishlist > a { background-color: #e91e63; height: 30px; right: -32px; text-align: center; top: 15px; width: 30px; -webkit-transition-duration: 500ms; transition-duration: 500ms; z-index: 9; } .wishlish-selected > a { background-color: black; height: 30px; right: -32px; text-align: center; top: 15px; width: 30px; -webkit-transition-duration: 500ms; transition-duration: 500ms; z-index: 9; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 1</a> </div> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 2</a> </div> <div class="product_wishlist pw"> <a href="#" target="_blank"><i class="ti-heart"></i>Wishlist 3</a> </div>