选择值大于零的最后一个输入答案

【问题标题】：Select last input with a value greater than zero jquery选择值大于零的最后一个输入
【发布时间】：2018-02-01 21:37:26
【问题描述】：

我有一个表单，其中包含一组设置为零值的输入，例如

<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">

然后用户输入他们想要的产品数量。我想选择他们输入数量的最后一个输入。我可以用这样的复选框做类似的事情。

$('.product-checkbox:checkbox:checked:last')

但是我怎样才能为输入框设置一个条件来选择值大于零的最后一个输入？谢谢。

【问题讨论】：

filter 获取值大于 0 的输入。last 获取最后一个。

标签： javascript jquery

【解决方案1】：

您可以使用:not() 和属性选择器[attribute]

:not([value='0'])

JavaScript 示例

let qtyGT0 = [...document.querySelectorAll(".qty:not([value='0'])")].reverse()[0];

// Just to test
if (qtyGT0) qtyGT0.classList.add("red");

.red{ background:red; }

<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">

另一个 JavaScript 示例

在纯 JavaScript ES6 中看起来像

let qtyGT0 = [...document.querySelectorAll(".qty")].filter( el => el.value > 0 ).pop();

// Just to test
if (qtyGT0) qtyGT0.classList.add("red");

.red{ background:red; }

<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

jQuery:

var $qtyGT0 = $(".qty").filter((i, el) => el.value > 0 ).last();

// Just to test
$qtyGT0.addClass("red");

.red{ background:red; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">

http://api.jquery.com/filter/
https://api.jquery.com/last/

【讨论】：

【解决方案2】：

纯 JavaScript 的答案是，您只需反向迭代它们并在找到的第一个处停止。

var inputs = document.querySelectorAll("input");

for(var len = inputs.length-1; len >=0; len--){
  if(inputs[len].value > 0){
     console.log(inputs[len].name);
     inputs[len].style.backgroundColor = "yellow";
     break;
  }
}

<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="1">
<input type="text" name="qty2" size="4" autocomplete="off" class="form-control quantity_wanted text" value="2">
<input type="text" name="qty3" size="4" autocomplete="off" class="form-control quantity_wanted text" value="3">
<input type="text" name="qty4" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">

【讨论】：