So i have a list of cards that each have an ID that sets when the page loads (these are diffent each time), i want to be able to go through each of the cards and count how many times 'completed' appears in that card then show the value in the . The html is shown below userCoursesComplete span.
<div class="col-4 mb-4" id="userCard3">
<div class="card user-card shadow bg-white">
<div class="card-body">
<h5 class="card-title text-grey-800">dave</h5>
<p class="card-text">[email protected]</p>
<p class="card-text d-none">Course 1 - </p>
<p class="card-text d-none">Course 2 - </p>
<p class="card-text d-none">Course 3 - </p>
<p class="card-text d-none">Course 4 - completed 21/09/21</p>
<p class="card-text">Courses Completed - <span class="userCoursesComplete">0</span></p><button data-bs-toggle="modal" data-bs-target="#userModal3" class="btn btn-link float-right">view user</button></div>
</div>
</div>CodePudding user response：
You can do it like this:
$('.userCoursesComplete').text(function() {
return $(this).closest(".card-body").find(".card-text.d-none:contains('completed')").length
})
This will search for div with classes card-text d-none that contains completed in the text and return the amount found. BUT I will recommend that you add a class to the div that has been completed and then count those.
Demo