如何確定多個div是否有嵌套標記

我有幾個.video-wrapper div，我想確保它們中有一個嵌套的HTML5視頻標記，然後將目標放在.video-wrapper和視頻標記中。如何確定多個div是否有嵌套標記

雖然下面的代碼現在對我來說看起來很簡單，但似乎我花了數小時試圖到達這裏。

有沒有更好或更快或更標準的方式來循環檢查是否存在嵌套元素而不是下面的方法來確定長度> 0？

這似乎是我錯過了一些東西，而不是確定它是否或不基於長度。

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 
     } 
    }

來源

2017-09-13 user3893613

簡單地只選擇那些符合使用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>

來源

2017-09-13 22:14:44 baao

使用querySelectorAll用CSS選擇你的條件標籤。

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>

來源

2017-09-13 22:19:05 colecmc

如何確定多個div是否有嵌套標記

回答

相關問題