如何从jQuery中动态排序类名的前几个文本字段中选择值

Question

我想使用jQuery在DOM中找到具有动态排序类名的前几个文本字段值的总和。

例如:

<input type="text" class="abc5">
<input type="text" class="xyz5">
<input type="text" class="abc9">
<input type="text" class="xyz9">
<input type="text" class="abc4">
<input type="text" class="xyz4">
<input type="text" class="abc3">
<input type="text" class="abc10">
<input type="text" class="abc2">

如何选择以abc开头的类名的前两个文本字段值的总和?谢谢你的帮助

Answer 1

你可以这样做:

$('[class^="abc"]').on("input", function() {
var n = $('[class^="abc"]').map(function() {
return $(this).val().match(/^d+$/) ? +$(this).val() : 0
}).get().reduce((pv, cv) => {
return pv + (parseFloat(cv) || 0);
}, 0)
console.log(n)
});

这将获得所有值为数字的值，并将它们相乘。

$('[class^="abc"]').on("input", function() {
var n = $('[class^="abc"]').map(function() {
return $(this).val().match(/^d+$/) ? +$(this).val() : 0
}).get().reduce((pv, cv) => {
return pv + (parseFloat(cv) || 0);
}, 0)
console.log(n)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="abc5">
<input type="text" class="xyz5">
<input type="text" class="abc9">
<input type="text" class="xyz9">
<input type="text" class="abc4">
<input type="text" class="xyz4">
<input type="text" class="abc3">
<input type="text" class="abc10">
<input type="text" class="abc2">

Answer 2

它将获得前两个输入字段，您可以在函数体中执行任何操作。

count=0;
$("input").each(function () {
if($(this).attr(class).substr(0,3) == "abc") {
$(this).val();

count++;
if(count > 1) {
return;
}
}
});

Answer 3

使用香草JS，它只会根据您的问题从前3(几个)输入中获取值

// Update function runs when initiated then every time an input is updated
// Just outputs the total to innerHTML of #calcTotal
const update = () => {
total.innerHTML = `Total: ${values.reduce((sum, a) => sum + a, 0)}`
};
const total = document.getElementById('calcTotal')
const holder = document.getElementById('calcInputs');
const inputs = Array.from(holder.children);
// Empty array to update with for lopp below
const values = [];
// For the first 3 items in inputs[]
for (let i = 0; i < 3; i++) {
// Push input value into values[]
values.push(parseFloat(inputs[i].value))

// Event listener updates value in array every time input is changed
inputs[i].addEventListener('change', (event) => {
values[i] = parseFloat(inputs[i].value);
update();
})
};
update();

body { font-family: sans-serif; margin: 0; }
* { box-sizing: border-box }
#calcInputs { display: flex; flex-wrap: wrap; }
input { margin: 0.5rem; width: calc( (100% / 3) - 1rem ); }
input:nth-of-type(-n+3) {
color: red;
font-weight: 900;
}
#calcTotal {
margin: 0.5rem;
font-size: 1.25rem;
font-weight: 900;
}

<div id="calcInputs">
<input type="number" class="abc5" value="10">
<input type="number" class="xyz5"value="25">
<input type="number" class="abc9" value="7">
<input type="number" class="xyz9" value="99">
<input type="number" class="abc4" value="2">
<input type="number" class="xyz4" value="5">
<input type="number" class="abc3" value="401">
<input type="number" class="abc10" value="62">
<input type="number" class="abc2" value="63">
</div>
<div id="calcTotal">Total</div>