javascript - jQuery - 获取不同 div 级别中最接近的元素

Question

我正在使用 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>

Answer 1

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>