將類添加到容器，如果它有兩個孩子

Question

我想添加類.events-row-fill到.events-row如果它有兩個孩子，但它不起作用。

這是我的腳本：

if($('.events-row').children().length === 2) { 
    $('.events-row').addClass('events-row-fill'); 
} 

HTML結構（減去含量）：

<div class="events-row"> 
    <div class="card"></div> 
    <div class="card"></div> 
    <div class="card"></div> 
</div> 
<div class="events-row"> 
    <div class="card"></div> 
    <div class="card"></div> 
</div> 

演示：CodePen

謝謝！

Answer 1

$(".events-row")會返回一個2個jQuery元素的數組（您在DOM中使用的每個.events-row）。您需要遍歷該數組並檢查每個數組並相應地應用類。

$(".events-row").each(function() { 
 
    // .toggleClass("classname", true/false) 
 
    $(this).toggleClass("events-row-fill", $(this).children().length === 2); 
 
});

.events-row-fill { 
 
    background: yellow; 
 
} 
 
.events-row { 
 
    border: 2px solid black; 
 
    margin: 5px 0; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="events-row"> 
 
    <div class="card">1</div> 
 
    <div class="card">2</div> 
 
    <div class="card">3</div> 
 
</div> 
 
<div class="events-row"> 
 
    <div class="card">1</div> 
 
    <div class="card">2</div> 
 
</div>