[英]jQuery closest() in .this element is not working
I have a embeded iframe text element in 3 modal elemets and each has a Copy button. 我在3个模态元素中有一个嵌入的iframe文本元素,每个元素都有一个复制按钮。 When I click on one copy button, I need to get the output of the particular iframe text.
当我单击一个复制按钮时,我需要获取特定iframe文本的输出。 If I use
如果我使用
$(".embed-iframe-text").text();
It will output all the three iframe texts together. 它会将所有三个iframe文本一起输出。 To avoid that and get the particular iframe text, I used
为了避免这种情况并获得特定的iframe文本,我使用了
$(this).closest(".embed-iframe-text").text();
but can't get the output. 但无法获得输出。 What is the wrong here?
这有什么不对?
$(".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"> <iframe width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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"> <iframe width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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"> <iframe width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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>
var n = $(this).closest(".embed-iframe-text").text();
this won't work as it doesn't comes on the same level, you need to go to the parent and find the item inside it. 这不会起作用,因为它不会出现在同一级别上,您需要转到父级并找到其中的项目。
use .parents('.modal-body').find(".embed-iframe-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"> <iframe1 width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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"> <iframe2 width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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"> <iframe3 width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </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>
I just realized from the comment that or .closest('.modal-body').find(".embed-iframe-text")
would work too. 我刚从注释中了解到。或
.closest('.modal-body').find(".embed-iframe-text")
也可以。 this will find the parent modal-body first and then the child. 这将首先找到父模态体,然后是子体。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.