如何從jQuery中動態排序的類名的前幾個文本欄位中選擇值

我想使用 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 開頭的類名的前兩個文本欄位值的總和？謝謝您的幫助

uj5u.com熱心網友回復：

你可以這樣做：

$('[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">

uj5u.com熱心網友回復：

它將獲得前兩個輸入欄位，您可以在函式體中執行任何操作。

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

uj5u.com熱心網友回復：

使用 vanilla 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>

標籤：javascript html jQuery css

上一篇：將每個div插入下一個div(jQuery)

下一篇：輸入型別=“檔案”的jQuery克隆