CODEWITHSUNDEEP
jquery
Jason
Jason

Reputation: 415

jQuery addClass adding class to all elements

I am adding class to <i> and removing previous selected class on clicking <li> element. It's not adding class and removing but it's adding class to all <i> element inside <li>

jQuery

$('ul.video_menu li').click(function(e) {
    $('ul.video_menu li i').removeClass('fas fa-play');
    $('ul.video_menu li i').addClass('fas fa-play');
});

HTML

<ul class="video_menu">
    <li class="play_video"><i class="fas fa-play"></i>ABC</li>
    <li><i></i>XYZ</li>
</ul>

Upvotes: 0

Views: 34

Answers (1)

cloned
cloned

Reputation: 6742

Use $(this) to only target the currently clicked li-element

$('ul.video_menu li').click(function(e) {
    $('ul.video_menu li i').removeClass('fas fa-play');
    $(this).find('i').addClass('fas fa-play');
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="video_menu">
    <li class="play_video"><i class="fas fa-play"></i>ABC</li>
    <li><i></i>XYZ</li>
</ul>

Upvotes: 3

Related Questions