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

Question

我有一个表格，其中一组输入设置为零值，如

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

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

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

但是如何为输入框添加一个条件来选择值大于零的最后一个输入？感谢。

Answer 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/

Answer 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">