香草JS查找元素缺少子元素

Question

我想獲得一個布爾值，讓我知道如果父元素有一個子元素。有些約束是：

1. 可以有這些「盒子」
2. 檢查，看看所有的條子有一個頁腳元素

3. X號，如果箱子沒有頁腳元素，添加一個類

   <div class="data-trend"> <header></header> <div class="main"></div> <footer></footer> </div>

   <div class="data-trend"> <header></header> <div class="main"></div> <footer></footer> </div>

   <div class="data-trend"> <header></header> <div class="main"> <span class="glyphicons"><span> <!-- On the glyphicons I would add class if there is no footer --> </div> <!-- notice no footer --> </div>

Answer 1

移動的上述評論爲實際的答案：

var elems = document.querySelectorAll('.data-trend'), 
 
    len = elems.length, 
 
    i = -1 
 
while(++i < len) { 
 
    if(!elems[i].querySelector('footer')) elems[i].classList.add('no-footer') 
 
}

.no-footer { border: 3px solid blue; }

<div class="data-trend"> 
 
    <header>Testing</header> 
 
    <div class="main"></div> 
 
    <footer>Footer</footer> 
 
</div> 
 

 
<div class="data-trend"> 
 
    <header>Testing</header> 
 
    <div class="main"></div> 
 
    <footer>Footer</footer> 
 
</div> 
 

 
<div class="data-trend"> 
 
    <header>Testing</header> 
 
    <div class="main"> 
 
    <span class="glyphicons"><span> 
 
    </div> 
 
</div>

如果你正在做的香草了很多這方面，是有意義的定義forEach幫手功能爲你自己

function forEach(elems, fn){ 
    var len = elems.length, 
     i = -1 
    while(++i < len) { 
    fn(elems[i]) 
    } 
}