我如何才能模式匹配 ID 仅确保变量编号匹配而不必硬编码所有可能性？

Question

我最近开始熟悉 Jquery 选择器....它们工作得很好。开始于...结束于...

我目前遇到的问题是我所有的变量名基本上都以相似的模式开头并以相似的模式结束。这个 ID 是从其他地方生成的，所以我希望我能做点什么来有效地使用它。

模式 ID 格式基本上类似于...

   "#id_newbudgetlineitem_set-0-line_item_october" 
   "#id_newbudgetlineitem_set-0-line_item_november"
   "#id_newbudgetlineitem_set-0-line_item_december"

我想在 set-* 上进行本质上的匹配，但前提是它与我数组中的其他 ID 相同。这甚至可以不必在 set-0 到 set-1000 的任何地方进行硬编码吗？不幸的是，每个人的 class 都与名称情况相同。有没有办法说如果给定数组中的集合数字全部匹配然后将它们相加？在这种情况下，我不能使用开头或结尾......并且不想硬编码 1000 种可能性。提前感谢任何想法或想法。

我正在尝试做类似...

  function update_total()
  {
    var total = 0;
    $('.budget').each(function(index, element) {
     "#id_newbudgetlineitem_set-0-line_item_october" + 
     "#id_newbudgetlineitem_set-0-line_item_november" +
     "#id_newbudgetlineitem_set-0-line_item_december"
        var val = parseFloat($(element).val());
        if( !isNaN( val )){
             total += val;
          }
        });
        $("#id_total").val(total);
  }

这是一个有效的解决方案......

  function update_total_total_total()
  {
    var ret = +$("input[name$='set-0-line_item_january']").val() + +$("input[name$='set-0-line_item_february']").val() + +$("input[name$='set-0-line_item_march']").val() + +$("input[name$='set-0-line_item_april']").val() + +$("input[name$='set-0-line_item_may']").val() + +$("input[name$='set-0-line_item_june']").val() + +$("input[name$='set-0-line_item_july']").val() + +$("input[name$='set-0-line_item_august']").val() + +$("input[name$='set-0-line_item_september']").val() + +$("input[name$='set-0-line_item_october']").val() + +$("input[name$='set-0-line_item_november']").val() + +$("input[name$='set-0-line_item_december']").val();
    $("input[name$='set-0-line_item_total']").val(ret);
  }

但我最多可以有 1000 个不同的设置值。有没有其他方法可以做到这一点，而不必再对这 999 次进行硬编码？

这更接近了....但总计仍显示为 0。它正在将所有总计更新为 0...所以这是进度，但未获得实际总计。感谢 Swati 的进步。

  function update_total_total_total() {
    //get length of input line_total for each sets..
    for (var i = 0; i < $("[name$=line_item_total]").length; i++) {
      var total = 0;
      //get all inputs but not line_item _total
      $(`input[name*=id_newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(index, element) {
         var val = parseFloat($(element).val());
        if( !isNaN( val )){
             total += val;
          }
      })
      $(`input[id$=set-${i}-line_item_total]`).val(total); //set value..of input
    }
  }

Answer 1

您可以获得名称以 line_item_total 结尾的总输入的长度，因此该值将与 for-loop.

相对应

然后，在 for 循环中，您可以使用 $(`input[name*=id_newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total])`) 这将从所有输入中获取值，期望 line_total_item 然后在每次迭代中添加值。

最后，使用 $(`input[name$=set-${i}-line_item_total]`).val(total); 在 line_total_item 文本框内设置总数。

演示代码 :

function update_total_total_total() {
  //get length of input line_total for each sets..
  for (var i = 0; i < $("[name$=line_item_total]").length; i++) {
    var total = 0;
    //get all inputs but not line_item _total
    $(`input[name*=id_newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(i, element) {
      var val = parseFloat($(element).val());
      if (!isNaN(val)) {
        total += val;
      }
    })
    $(`input[name$=set-${i}-line_item_total]`).val(total); //set value..of input
  }
}
update_total_total_total()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  SET 0 :
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_october" value="5">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_november" value="51">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_december" value="15">
  <br/> Total :
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_total" value="" placeholder="total">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_cost_center">
  <input type="text" name="id_newbudgetlineitem_set-0-line_item_description">
</div>
<br/>
<div>
  SET 1
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_october" value="5">
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_december" value="534">
  <br/> Total :
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_total" value="" placeholder="total">
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_cost_center">
  <input type="text" name="id_newbudgetlineitem_set-1-line_item_description">
</div>
<br/>
<div>
  SET 2
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_december" value="4">
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_oct" value="5">
  <br/> Total :
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_total" value="" placeholder="total">
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_cost_center">
  <input type="text" name="id_newbudgetlineitem_set-2-line_item_description">
</div>

Answer 2

这是最终的工作代码。正如 Swati 所说，这是一个错误的名称引用。

  function update_total_total_total() {
    for (var i = 0; i < $("[name$=line_item_total]").length; i++) {
      var total = 0;
      $(`input[name*=newbudgetlineitem_set-${i}-line_item]:not([name$=line_item_total]):not([name$=line_item_cost_center]):not([name$=line_item_description])`).each(function(i, element) {
        var val = parseFloat($(element).val());
        if( !isNaN( val )){
             total += val;
          }
      })
      $(`input[name$=set-${i}-line_item_total]`).val(total);
    }
  }

我如何才能模式匹配 ID 仅确保变量编号匹配而不必硬编码所有可能性？

How can I pattern match ID only making sure the variable number matches without having to hardcode all of the possibilities?

javascript

arrays

django

jquery

django-forms