javascript - 选择值大于零的最后一个输入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/