我正在使用 class="btn btn-primary modal-save"
单击列表按钮。
当我单击该按钮时,我希望它获取 div class="modal-body"
的 textarea
元素。
由于某种原因,我的 closest()
方法没有按照我希望的方式运行,并且返回未定义
为什么以及如何解决?
$('.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
返回与选择器匹配的最近的祖先。如果不是直系祖先,那是行不通的。尝试首先选择 .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>
关于javascript - jQuery - 获取不同 div 级别中最接近的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51301051/