[英]jQuery - get closest element in different div levels
I am clicking the list button with class="btn btn-primary modal-save"
. 我单击带有class="btn btn-primary modal-save"
的列表按钮。
When I click that button, I want it to grab the textarea
element of div class="modal-body"
. 当我单击该按钮时,我希望它抓住div class="modal-body"
的textarea
元素。
For some reason my closest()
method isn't functioning the way I want it to be, and returns undefined 由于某种原因,我的closest()
方法未按我希望的方式运行,并返回未定义
Why, and how to fix? 为什么以及如何解决?
$('.modal-save').on('click', function() { var text = $(this).closest(".modal-footer")[0]; console.log(text) // this code works var text = $(this).closest(".modal-body textarea")[0]; console.log(text) // this gives me undefined. Why?? });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div>
closest
returns the nearest ancestor matching the selector. closest
返回与选择器匹配的最接近的祖先 。 If it's not a direct ancestor, it won't work. 如果不是直接祖先,它将无法正常工作。 Try selecting the .modal-content
first (which is the nearest common ancestor to both), and then trying to find the textarea
: 尝试先选择.modal-content
(这是两者的最接近的共同祖先), 然后尝试找到textarea
:
$('.modal-save').on('click', function() { var text = $(this).closest(".modal-content").find("textarea"); console.log(text.val()) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'>foo</textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div>
You can also find the textarea
this way. 您也可以通过这种方式找到textarea
。
$(this).closest(".modal-footer").prev(".modal-body").find("textarea")[0]
// ^^go for parent ^^go for sibling ^^Its child
Example: 例:
$('.modal-save').on('click', function() { var text = $(this).closest(".modal-footer")[0]; console.log(text) // this code works var text = $(this).closest(".modal-footer").prev(".modal-body").find("textarea")[0]; console.log(text) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div>
Here is my contribution. 这是我的贡献。
I've split everything up into steps so you would understand clearer. 我已将所有内容分成若干步骤,以便您更清楚地了解。
Using .parent()
you access the DOM element that is top-most relative to your element. 使用.parent()
您可以访问相对于您的元素而言最顶层的DOM元素。
Using .find()
you get the descendants of each element in the current set. 使用.find()
可以获取当前集中每个元素的后代。
$('.modal-save').on('click', function() { let footer = $(this).parent(); let content = footer.parent(); let textarea = content.find('.modal-body textarea'); let text = textarea.val(); console.log(text); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-content"> <div class="modal-header">...</div> <div class="modal-body"> <textarea class="form-control" rows="10" placeholder='comment...'></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary modal-save" data-dismiss="modal">Save changes</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.