jQuery：如何獲得輸入文本的第一個值和最後一個值

Question

我不知道如何獲取輸入文本的最後一個值。當輸入類型爲空時，我已經獲得第一個值，但沒有獲得值。這裏是我的代碼：

HTML

<input type="text" name="date[]" class="date" id="date" value="6/17"><br/> 
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/> 
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/> 
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/> 
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/> 
<input type="text" name="date[]" class="date" id="date" value=""><br/> 
<input type="text" name="date[]" class="date" id="date" value=""><br/> 

JS/jQuery的

$(document).ready(function(){ 
    var $set = $('.date'); 
    var len = $set.length; 
    $set.each(function(index, element) { 
     if (index === 0) { 
      alert (this.value); 
     } 
    });  
}); 

Answer 1

你可以扭轉你的循環，並從去年開始。

var $set = $('.date'); 
var len = $set.length; 
var firstVal = $($set[0]).val(); 
var lastVal = null; 
for (var i = len - 1; i > 0; i--){ 
    if ($($set[i]).val()){ 
    lastVal = $($set[i]).val(); 
    break; 
    } 
} 

Answer 2

您可以使用[！值= '']只選擇值輸入。 然後使用first（）和last（）從所選列表的第一個項目和最後一個項目中獲取值。

var $values = $(".date[value!='']"); 
 
$("#firstValue").html($values.first().val()); 
 
$("#lastValue").html($values.last().val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="date[]" class="date" id="date" value="6/17"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value=""><br/> 
 
<input type="text" name="date[]" class="date" id="date" value=""><br/> 
 
<div>First value: <span id="firstValue"></span></div> 
 
<div>Last value: <span id="lastValue"></span></div>

Answer 3

我不知道如何獲得輸入文本最後一個值。當輸入類型爲空時，我已獲得 的第一個值，但沒有獲得值。

這應該工作。

var result = $("input[value!='']"); 
 
console.log(result.first().val()); 
 
console.log(result.last().val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="date[]" class="date" id="date" value="6/17"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/> 
 
<input type="text" name="date[]" class="date" id="date" value=""><br/> 
 
<input type="text" name="date[]" class="date" id="date" value=""><br/>

而且，就像一個側面提示，不要使用具有相同的值，因爲這是無效的HTML多id屬性。相反，如果您想訪問多個元素，請使用您已完成的類屬性。