如何使用javascript导航到正确的div？

这可能是一个noob问题，但我正试图根据相关的缩略图（popup div的兄弟div）隐藏/显示一个弹出视频，因为对于该站点，我们希望能够为某些页面提供多个弹出视频，而不需要为每个缩略图弹出视频对提供唯一的id/类。我一直在使用jquery导航DOM，以便隐藏/显示正确的弹出视频。到目前为止，我已经做了很多工作，但我需要能够让YouTube视频在弹出窗口关闭时停止播放

因为我认为jquery没有内置的postMessage，所以我想我必须使用javascript来完成这个任务？但是我很难找到如何导航到正确div中的iframe

基本上，对于页面上的每个视频，html的设置如下：

<div class="smVidBox">
  <img alt="" style="float: right; margin-top: 5px;" title="gi_tinyvideo" src="/sf-images/architect/video_callout_prof.jpg?sfvrsn=0" />
</div> 
<div id="overlayBG"> 
    <div id="popupVideoBox"> 
        <div id="popupVideoTitle">Commercial Residential</div> 
        <div class="popupCloseBtn">
            <img src="/sf-images/design/videoclosebtn.jpg?sfvrsn=0" title="videoclosebtn" />
        </div> 
        <div id="popupVidContainer">
            <iframe width="605" height="340" frameborder="0" src="http://www.youtube.com/embed/url"></iframe> 
        </div>
    </div> 
</div>

$(".popupCloseBtn").click(function ()
{
    $(this).siblings().hide();
    $(this).parent().hide();
    $(this).parent().parent().hide();
    $(this).hide();

    var div = document.getElementById("popupVidContainer");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    state = 'hide';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');

但是用于暂停视频的javascript部分不知道要转到哪个popupVidContainer；它只会转到它找到的第一个popupVidContainer，除了第一个popupVidContainer之外，它对任何东西都不起作用

那么，如何基于“this”popupCloseBtn导航到正确的popupVidContainer呢

（是的，我知道在一个页面上有多个ID是不好的做法。所有这些都可能在以后更改为类。）

---

编辑：已找到答案。谢谢你的帮助

您可以在没有id的情况下执行此操作（但是您确实应该更改id，以便每个id在页面中都是唯一的），只要布局一致-

$(".popupCloseBtn").click(function ()
{
    $(this).siblings().hide();
    $(this).parent().hide();
    $(this).parent().parent().hide();
    $(this).hide();

    //var div = document.getElementById("popupVidContainer"); // replacing this
    var div = $(this).parent().find('div:eq(2)'); // with this
    // var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    var iframe = div.getElementsByTagName('iframe')[0],
        iframeDoc = iframe.contentWindow.document;
    state = 'hide';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    //iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
    iframeDoc.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}

---

使用遍历DOM的功能，并知道视频容器div与其父元素的关系在何处，将为您提供所需的内容。

可能会更改吗？它必须改变，否则你会得到不可预测的结果，就像你现在这样。我附和杰伊的话。您需要将多个ID更改为类。这不仅是一种不好的做法，而且是不正确的代码。如果由我决定，我会更改它们，但我只是一名实习生，没有这样做的权限。但是，通过使用jquery遍历DOM，我还能使用postMessage方法吗？因为如果Google给了我正确的结果，除非使用插件，否则jquery不会有这样的结果，我不知道我是否可以依靠YouTube获得该插件？你应该能够，你必须测试它以确保。getElementsByTagName（“iframe”）[0]会是什么。jquery中的contentWindow会是什么？我放了$（this.parent（）.find（“iframe”）.contents（），但它不起作用。但我也认为我读到contents（）不能跨域工作？很抱歉，我对javascript/jquery还是有点陌生。我做了一些更改，以便您可以看到我将如何处理您的整个代码块。我只是换了一行，以消除我们对身份证的需求。最终解决了这个问题。我需要将jquery变量更改为$（this.parent（）.find（'div:eq（2）'）[0]。现在它似乎工作得很好。再次感谢！