我有一个元素列表，我想检查特定数量的类，如果一个元素有10个这样的类，我想要一些元素来改变。
因此，如果元素“.card”继续10“.fa-heart”，则某些文本和类只需要在该元素中进行更改。现在它将它应用于我的所有元素。
这就是我现在所处的位置
js code：
$( ".card .card-footer .btn" ).html( "Add heart" );
$(".card .card-user-points ul").each(function() {
var countHearts = $(this).children('.fa-heart').length;
console.log(countHearts);
if(countHearts == 10) {
$( ".card .card-footer .btn" ).html( "Give Coffee" );
$(".card-wrapper").find( ".card .btn" ).addClass( "green" );
}
});
HTML：
<div class="card-wrapper">
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
<li class="fa fa-heart-o fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
<div class="card">
<div class="card-settings fa fa-cog"></div>
<div class="card-header">
<h1 class="user-name">Navn Navnsen</h1>
</div>
<div class="card-user-info">
<p class="user-phone">Tlf.: 12345678</p>
<p class="user-mail">mail: <a href="mailto:min@mail.dk">min@email.dk</a></p>
</div>
<div class="card-user-points clearfix">
<ul>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
<li class="fa fa-heart fa-3x"></li>
</ul>
</div>
<div class="card-user-stats clearfix">
<p>Sidste klip</p>
<p class="user-last-stamp">11/11/2014</p>
<p>Samlet klip</p>
<p class="user-total-stamps">147</p>
<p>kopper givet</p>
<p class="user-total-cups">14</p>
</div>
<div class="card-footer">
<div class="btn"></div> <a href="#" class="destructive-link"></a>
</div>
</div>
</div>
答案 0 :(得分：1)
试试这个：
$(this).closest(".card").find(".card-footer .btn").html( "Give Coffee" );
答案 1 :(得分：0)
请参阅http://jsfiddle.net/mah93cv1/
$(".card .card-user-points ul").each(function() {
var countHearts = $(this).children('.fa-heart').length;
console.log(countHearts);
if(countHearts == 10) {
$(this).parent().parent().children(".card-footer").children(".btn").html( "Give Coffee" );
$(this).parent().parent().children(".card .card-footer" ).children(".btn").addClass( "green" );
}
});
答案 2 :(得分：0)
您在这两行中选择了btn类的所有元素
$( ".card .card-footer .btn" ).html( "Give Coffee" );
$(".card-wrapper").find( ".card .btn" ).addClass( "green" );
你必须选择目标，你可以通过返回当前ul元素的父卡并从其子元素中选择。
$(".card .card-user-points ul").each(function() {
var countHearts = $(this).children('.fa-heart').length;
console.log(countHearts);
if(countHearts == 10) {
targetCardDiv = $(this).parents('.card');
targetCardDiv.find(".card-footer .btn" )
.addClass( "green" )
.html( "Give Coffee" );
}
});
检查这个小提琴，我在最后一个卡片div中删除了一个类心脏的li条目，以证明计数检查有效。您将看到两个绿色背景＆＃39; Give Coffee＆＃39;块。