如何獲取上一個textarea元素

Question

我想單擊文本區域旁邊的按鈕后，從文本區域獲取文本。

問題是我將有許多文本區域，並且每個按鈕都必須返回與其對應的文本區域的文本。

這是我的代碼

 function btnmodif(){ var mod = $(this).prev().val(); alert(mod); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="list-item-edit"> <textarea class="list_input">eggs</textarea> <button class="btn btn-modify-item" onClick="btnmodif()">get text</button> </div> <div class="list-item-edit"> <textarea class="list_input">water</textarea> <button class="btn btn-modify-item" onClick="btnmodif()">get text</button> </div> 

Answer 1

您必須將單擊的object傳遞給btnmodif函數。

<button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button>

JS

function btnmodif(button){
    var mod = $(button).prev().val();
    alert(mod);
};

另外，您應該使用.prev函數。

在此處閱讀有關.prev()函數的更多信息。

 function btnmodif(button){ var mod = $(button).prev().val(); alert(mod); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="list-item-edit"> <textarea class="list_input">eggs</textarea> <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button> </div> <div class="list-item-edit"> <textarea class="list_input">water</textarea> <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button> </div> 

Answer 2

首先，您需要將clicked元素作為上下文傳遞給函數：

onClick="btnmodif(this)"

...

function btnmodif(button){

其次，如果HTML結構保持不變（即textarea始終是緊接在按鈕之前的元素），則可以使用prev()

var mod = $(button).prev('textarea').val();

https://api.jquery.com/prev/

如果不能保證維護該結構，那么.siblings()會為您提供更多的靈活性，因為它會搜索DOM中相同層次結構上的所有元素以查找所需內容：

var mod = $(button).siblings('textarea').val();

https://api.jquery.com/siblings/

Answer 3

這是您要找的東西。

• this作為參數添加到您的button.onclick

感謝jQuery：

• 使用$(element).parent() ，您將獲得div元素。
• 使用$(element).parent().find('.list_input') ，您將獲得textarea元素。
• 使用$(element).parent().find('.list_input').text()可為您提供與所單擊按鈕“相關”的文本區域的值。

 function btnmodif(element){ var result = $(element).parent().find('.list_input').text(); alert(result); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="list-item-edit"> <textarea class="list_input">eggs</textarea> <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button> </div> <div class="list-item-edit"> <textarea class="list_input">water</textarea> <button class="btn btn-modify-item" onClick="btnmodif(this)">get text</button> </div> 

Answer 4

內聯處理程序規范中缺少this ：

https://jsfiddle.net/3mvod6ux/

將兄弟姐妹與選擇器一起使用，以獲取屬於單擊按鈕的同一塊的textarea值。

function btnmodif(button){
    var mod = $(button).siblings("textarea").val();
    alert(mod);
};

Answer 5

完成這項任務的另一種方法。 而是使用HTML事件屬性，這是更好的方法。

var btnModifyItem = $('.btn-modify-item');

btnModifyItem.click(function(){
    var mod = $(this).prev().val();
    alert(mod);
})

Answer 6

這樣，您可以獲取button的父級（和textarea ），然后可以從子textarea獲取textarea ：

$('button').on('click', function () {
            console.log(($(this).parent().find("textarea").text()));
        });