jQuery：獲取最接近按鈕的值

Question

這是我的html代碼

<div class="panel-footer">
<div class="input-group">
<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
<span class="input-group-btn">
<button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
</span>
</div>

<div class="input-group">
<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
<span class="input-group-btn">
<button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="80">Send</button>
</span>
</div>
</div>

這是我的jQuery代碼

$(document).on('keypress', '.message', function (e) {
    if (e.which == 13) {
    var msg = $(this).val();
    var id = $(this).closest('span').next('button.btn_chat').val();
    alert(msg);
    alert(id);
}
e.preventDefault();
}); 

卡在id上，它始終顯示未定義。

我如何獲得按鈕值

Answer 1

我已插入代碼。 在這里它的ID不給未定義

 $(document).on('keypress', '.message', function (e) { if (e.which == 13) { var msg = $(this).val(); var id = $(this).next('span').find('button.btn_chat').val(); alert(msg); alert(id); } e.preventDefault(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button> </span> </div> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="80">Send</button> </span> </div> </div> 

Answer 2

范圍是下一個同級，並且按鈕是范圍的后代，因此使用最近和下一個將不起作用。

最近的（）用於查找祖先元素，而下一個（）用於查找下一個兄弟元素。

在您的情況下，應使用.next（）查找跨度，並使用.find（）查找后代按鈕

var id = $(this).next('span').find('button.btn_chat').val();

演示： 小提琴

---

另一個更簡單的解決方案是使用data-*屬性將值存儲在輸入元素本身中，例如

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" data-id="79">

然后

var id = $(this).data('id');

Answer 3

$(this).closest('span')將搜索文本框最近的父span標簽，而您需要相鄰的span標簽。 嘗試將next()與find() ：

 $(function() { $('input:text.message').on('keypress', function(e) { if (13 !== e.which) return; var btn = $(this).next().find('.btn_chat'); console.log(this.value, btn.val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button> </span> </div> <div class="input-group"> <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> <span class="input-group-btn"> <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="80">Send</button> </span> </div> </div> 

Answer 4

嘗試使用$（this）.parent（）。closest（'span'）。next（'button.btn_chat'）。val（）;