CODEWITHSUNDEEP
jquery
Marc
Marc

Reputation: 25

adding html inside button when button has active class

I am trying to run some jQuery to check if certain buttons have the class .active, to then add a check mark inside those buttons.

I can change the HTML for all buttons if one of them has the active class but can't seem to figure for each one.

This is the bootstrap button with the toggle:

<button class="btn btn-vert" data-bs-toggle="button">
   Texte bouton
</button>

and here is the JavaScript that doesn't work:

if ($('.btn-vert').hasClass('active')) {
    $(this).append('<span class="float-end"><i class="fa-solid fa-check"></i></span>');
}

Upvotes: 0

Views: 121

Answers (1)

Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

You need to loop trough your buttons.
This adds a check mark to all buttons with the class active

I am trying to run some JavaScript to check if certain buttons have the class .active, to then add a check mark inside those buttons.

This succeeds in that

$('.btn-vert').each(function(i, button) {
    if ($(button).hasClass('active')) {
        $(button).append('<span class="float-end"><i class="fa-solid fa-check"></i></span>');
    } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="btn btn-vert" data-bs-toggle="button">
   Texte bouton
</button>
<button class="btn btn-vert" data-bs-toggle="button">
   Texte bouton
</button>
<button class="btn btn-vert active" data-bs-toggle="button">
   Texte bouton
</button>

Upvotes: 1

Related Questions