jQuery中的Closest()在同一级别时不起作用

Question

问题:

我希望(点击一个按钮后 - 这部分没问题)选择与类最接近的元素.my-textarea,但是prev()并不总是可以使用,因为代码是动态的.你能帮忙吗？

细节:

我有这个HTML代码:

<div class="row">
    <div class="label">Description:</div>
    <textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea>
    <button type="button" class="my-submit" name="my-submit">Save</button>
</div>

我的JS代码(在带有"my-submit"点击事件类的按钮上)是:

var text = $(this).closest('.my-textarea').val();

但它不起作用.我没有定义.

如果我试过: -

var text = $(this).prev().val();

我将获得文本区域的文本,但正如我所提到的,我的代码是动态的,元素的顺序和数量将会改变.所以,prev()是不可选择的.

知道怎么做closest()工作吗？

Answer 1

需要使用siblings()而不是closest()：-

$('.my-submit').click(function(e){
  e.preventDefault();
  var text = $(this).siblings('textarea').val();
  console.log(text);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="label">Description:</div>
    <textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea>
    <button type="button" class="my-submit" name="my-submit">Save</button>
</div>

Answer 2

我总是选择父母而不是用课程搜索孩子.这样,您的元素几乎可以放置在父级中的任何位置.

$(this).parent().find('.my-textarea').val();