需要帮助以jquery定位特定元素

Question

我需要一些帮助来针对使用jQuery的特定div。

我的目标是在单击链接（或div或其他元素！！）时打开弹出窗口。

在我拥有此结构之前：

 <a href="#" class="sub-title round " id="myBtn">
   <div class="layer open">Lorem Ipsum Dolor</div><img src="">
 </a>
   <div id="myModal" class="modal">
    <!-- Modal content -->
   <div class="modal-content">
    <a class="close">&times;</a>
     <div class="video-wrapper">
      <div class="video-container">
       <iframe></iframe>
      </div>
     </div>
    </div>
  </div>

单击“ .sub-title”链接时，它是将“ active”类添加到我的模态中。

有了这个，正在工作：

   $('.open').on('click', function () {
     $(this).parent().next('div').addClass('active');
    })

但是现在，我的结构已经改变。现在有更多的嵌套元素，例如：（单击“ .open” div时，我仍然需要打开模式div）

     <li>
        <a href="#" class="sub-title round" id="myBtn">
            <svg>
                <circle></circle>
            </svg>
            <div class="layer open">
                <i class="fas fa-play"></i>
            </div>
        </a>
        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <a class="close">&times;</a>
                <div class="video-wrapper">
                    <div class="video-container">
                        <iframe></iframe>
                    </div>
                </div>
            </div>
        </div>
    </li>

所以我尝试了：

  $(this).parent().parent('a').next('.modal').addClass('active');
  $(this).parent().parent().next().addClass('active');
  $(this).parent().next().addClass('active');
  $(this).parent().parent().find('div').addClass('active');
  $(this).parent().find('div').addClass('active');
  $(this).parent().closest('div').addClass('active');
  $(this).parent().parent().closest('div').addClass('active');

这些工作都没有。我敢肯定这很简单，但是我找不到合适的选择器。

与我的研究平行，我发现这里使用了这个简单的html结构。我想知道是否有提供此类示例的教程或文章来学习如何从像这样的简单模式中正确定位jquery中的DOM元素。

.main * { 
            display: block; 
            border: 2px solid lightgrey; 
            color: grey; 
            padding: 5px; 
            margin: 15px; 
        } 
 <div class="main"> 
    This is great-great grand parent element ! 
    <div style="width:600px;"> 
        This is great grand parent element ! 
        <ul> 
            This is the second ancestor element ! 
            <ul> 
                <!-- This element will be selected -->
                This is first ancestor element ! 
                <li>This is direct parent ! 
                <span>This is span the child element !</span> 
                </li> 
            </ul> 
        </ul> 
    </div> 
    </div> 

我需要一些帮助来针对使用jQuery的特定div。我的目标是在单击链接（或div或其他元素！）时打开一个弹出窗口。在使用此结构之前：

Answer 1

与closest()一起使用next()

Answer 2

您可以这样操作：