jQuery nearest（）在.this元素中不起作用

Question

我在3个模态元素中有一个嵌入的iframe文本元素，每个元素都有一个复制按钮。 当我单击一个复制按钮时，我需要获取特定iframe文本的输出。 如果我使用

$(".embed-iframe-text").text();

它会将所有三个iframe文本一起输出。 为了避免这种情况并获得特定的iframe文本，我使用了

$(this).closest(".embed-iframe-text").text(); 

但无法获得输出。 这有什么不对？

 $(".copy-iframe").on("click", function() { var m = $(".embed-iframe-text").text(); var n = $(this).closest(".embed-iframe-text").text(); alert(n); }); 

 .embed-iframe-text, .embed-src span { visibility: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- modal 1 --> <div class="modal-body"> <div class="embed-iframe"> <span class="embed-iframe-text"> &lt;iframe width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; </span> </div> <div class="embed-button"> <div class="embed-src"> <span>Dynamic text here</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> <!-- modal 2 --> <div class="modal-body"> <div class="embed-iframe"> <span class="embed-iframe-text"> &lt;iframe width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; </span> </div> <div class="embed-button"> <div class="embed-src"> <span>Dynamic text here</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> <!-- modal 3 --> <div class="modal-body"> <div class="embed-iframe"> <span class="embed-iframe-text"> &lt;iframe width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; </span> </div> <div class="embed-button"> <div class="embed-src"> <span>Dynamic text here</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> 

Answer 1

var n = $(this).closest(".embed-iframe-text").text();

这不会起作用，因为它不会出现在同一级别上，您需要转到父级并找到其中的项目。

使用.parents('.modal-body').find(".embed-iframe-text")

 $(".copy-iframe").on("click", function() { var m = $(".embed-iframe-text").text(); var n = $(this).parents('.modal-body').find(".embed-iframe-text").text(); console.log(n) }); 

 .embed-iframe-text, .embed-src span { visibility: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- modal 1 --> <div class="modal-body"> <div class="embed-iframe"> <span class="embed-iframe-text"> &lt;iframe1 width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; </span> </div> <div class="embed-button"> <div class="embed-src"> <span>Dynamic text here</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> <!-- modal 2 --> <div class="modal-body"> <div class="embed-iframe"> <span class="embed-iframe-text"> &lt;iframe2 width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; </span> </div> <div class="embed-button"> <div class="embed-src"> <span>Dynamic text here</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> <!-- modal 3 --> <div class="modal-body"> <div class="embed-iframe"> <span class="embed-iframe-text"> &lt;iframe3 width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; </span> </div> <div class="embed-button"> <div class="embed-src"> <span>Dynamic text here</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> 

我刚从注释中了解到。或.closest('.modal-body').find(".embed-iframe-text")也可以。 这将首先找到父模态体，然后是子体。