最近（）jQuery中時不處於同一級別的工作

Question

問題：

我想（點擊按鈕之後 - 這部分是OK）選擇一類.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代碼（在按鈕與階級 「我提交」 點擊事件）是：

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

你需要使用

closest類將向上遍歷DOM樹來尋找元素，而在這種情況下textarea是按鈕的兄弟姐妹參考它。

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

DEMO

Answer 3

我總是選擇父母，比搜索帶班的孩子。這樣，你的元素幾乎可以放在父母的任何地方。

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