Question

我使用class="btn btn-primary modal-save"单击列表按钮。

当我单击该按钮时，我希望它抓住textarea的{{1}}元素。

由于某种原因，我的div class="modal-body"方法无法正常运行，并返回未定义

为什么以及如何解决？

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??


});

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>

Answer 2

您还可以通过这种方式找到textarea。

$(this).closest(".modal-footer").prev(".modal-body").find("textarea")[0]
//          ^^go for parent       ^^go for sibling    ^^Its child

示例：

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

Answer 3

这是我的贡献。

我将所有内容分解为多个步骤，以便您更清楚地了解

。

使用.parent()，您可以访问相对于您的元素而言最顶层的DOM元素。

使用.find()，您可以获得当前集中每个元素的后代。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:width="2dp" android:color="#1E90FF"/>
            <size android:width="60dp" android:height="60dp"/>
        </shape>
    </item>
</selector>

$('.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);
});

Answer 4

我可以将文本区域作为目标，以便更快地执行。

alert($('.modal-body textarea').val());

请参阅fiddle

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

4 个答案: