计算Div中的值并在Span中显示结果

Question

所以我有一个卡片列表，每个卡片都有一个ID，当页面加载时设置(这些每次都不同)，我希望能够通过每张卡片并计算"完成"出现在该卡中的次数，然后显示值。html显示在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">[e-mail]</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>

Answer 1

你可以这样做:

$('.userCoursesComplete').text(function() { 
return $(this).closest(".card-body").find(".card-text.d-none:contains('completed')").length
})

这将搜索类card-text d-none中包含completed的div，并返回找到的数量。但是，我建议您在已经完成的div中添加一个类，然后计算这些。

$('.userCoursesComplete').text(function() { 
return $(this).closest(".card-body").find(".card-text.d-none:contains('completed')").length
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">[e-mail]</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>