複数のdivにネストされたタグがあるかどうかを判断する方法

Question

.video-wrapperとvideoタグの両方をターゲティングする前に、HTML5ビデオタグをネストしておきたい複数の.video-wrapper divがあります。

以下のコードは今私にとっては本当にシンプルに見えますが、ここに来るのに何時間も費やしたようです。

以下のアプローチではなく、ネストされた要素が存在するかどうかを確認するために、ループスルーする方が優れていますか？

長さに基づいているのかどうかを判断するのではなく、何かが欠けているようです。

var videoWrappers= document.getElementsByClassName("video-wrapper"); 
for (var i = 0; i < videoWrappers.length; i++) { 
    var thisVideo = videoWrappers[i].getElementsByTagName('video') 
     if(thisVideo.length > 0){ 
     // then the VIDEO tag exists 
     }else{ 
     // no video tag exists so exit loop 
     } 
    } 

Answer 1

単にCSSセレクタでquerySelectorAll()

document.querySelectorAll('.wrapper > video'); 

console.log(document.querySelectorAll('.wrapper > video'));

<div class="wrapper"> 
 

 
</div> 
 
<div class="wrapper"> 
 
    <video></video> 
 
</div> 
 
<div class="wrapper"> 
 

 
</div>

Answer 2

使用querySelectorAllを使用して、あなたの条件に一致するタグのみを選択します。

var results = document.getElementById('results'), 
 
    videos = document.querySelectorAll('.videos video'); 
 

 
for (video of videos) { 
 
    results.insertAdjacentHTML('afterbegin', `<p>${video.id}</p>`); 
 
}

<div id="results"></div> 
 

 
<div class="videos"> 
 
    <a href="some-link.html">some link</a> 
 
    <video id="myvid" width="400" controls> 
 
    <source src="mov_bbb.mp4" type="video/mp4"> 
 
    <source src="mov_bbb.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
    </video> 
 
</div> 
 

 
<div class="videos"> 
 
    <a href="some-link-1.html">some random link</a> 
 
    <video id="myvid-1" width="400" controls> 
 
    <source src="mov_bbb1.mp4" type="video/mp4"> 
 
    <source src="mov_bbb1.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
    </video> 
 
</div> 
 

 
<div class="videos"> 
 
    <a href="some-link-2.html">some other link</a> 
 
    <video id="myvid-2" width="400" controls> 
 
    <source src="mov_bbb2.mp4" type="video/mp4"> 
 
    <source src="mov_bbb2.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
    </video> 
 
</div> 
 

 
<div class="videos"> 
 
    <a href="no-video.html">No Video</a> 
 
</div>