jQuery closest() in .this element is not working

Question

I have a embeded iframe text element in 3 modal elemets and each has a Copy button. When I click on one copy button, I need to get the output of the particular iframe text. If I use

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

It will output all the three iframe texts together. To avoid that and get the particular iframe text, I used

$(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"> &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();

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")

 $(".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> 

I just realized from the comment that or .closest('.modal-body').find(".embed-iframe-text") would work too. this will find the parent modal-body first and then the child.