使用 jQuery 在增量 ID 输入之间进行迭代答案

【问题标题】：Iterate between incremental ID inputs using jQuery使用 jQuery 在增量 ID 输入之间进行迭代
【发布时间】：2018-09-21 08:47:28
【问题描述】：

我的 HTML 中有一些输入具有 ID，例如 element1、element2、element3、...elementN

如果我想在每个元素上使用选择器，我不想像这样为每个元素创建一个选择器：$("#element1") 有没有办法使用for 循环在element1 和@ 之间进行迭代987654328@ 使用 jQuery？

编辑：我需要使用另一个像这样的增量 ID 执行验证

var X1 = $("#element1").val();
var X2 = $("#anotherElement1").val();
if (X1 == X2)
{ 
//do something
}

Edit2（添加上下文）

<input data-val="true" data-val-number="The field Element1 must be a 
number." id="Element1 " max="1000" min="0" name="EnergyAt1" step="0,1" type="text" value="18,3" 
data-role="numerictextbox" role="spinbutton" aria-valuemin="0" 
aria-valuemax="1000" 
class="k-input" aria-valuenow="18,3" aria-disabled="false" style="display: none;">

<input data-val="true" data-val-number="The field AnotherElement1 must be a 
number." id="AnotherElement1 " max="1000" min="0" name="EnergyAt1" step="0,1" 
type="text" value="18,3" data-role="numerictextbox" role="spinbutton" aria- 
valuemin="0" aria-valuemax="1000" class="k-input" aria-valuenow="18,3" aria- 
disabled="false" style="display: none;">

我需要做的是绑定到我的提交按钮的函数，该函数检查 1 到 N 之间的每个元素是否 (ElementX.val() != 0 && AnotherElementX == 0) 阻止提交表单。

【问题讨论】：

使用一个普通的class。这是增量id 属性是反模式的原因之一
我真的不打算删掉它，因为我有其他输入不同的名称，我需要对其执行验证的增量 ID。
这听起来不像是不使用类的理由。如果有的话，听起来更多是正确使用类的理由。
如果您可以扩展此示例，并添加一些 html 元素外观的示例，并扩展 X3 将与您的演示中的示例进行比较，那就太好了。他们都应该相互比较吗？成套？独角兽？
在 Edit2 中做到了。

标签： javascript jquery for-loop jquery-selectors

【解决方案1】：

假设每个以element 开头的ID 都是您要选择的，您可以使用选择器字符串[id^="element"]，它将选择id 以element 开头的所有内容：

$('[id^="element"]').each(function() {
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1">e1</div>
<div id="element2">e2</div>
<div id="element3">e3</div>
<div id="element4">e4</div>

但如果可能，请改用类 - ids 在这种情况下不太合适：

$('.element').each(function() {
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">e1</div>
<div class="element">e2</div>
<div class="element">e3</div>
<div class="element">e4</div>

【讨论】：

这是一个很好的答案，但我无法在我的代码中成功复制它，我已经在下面的帖子中发布了对我有用的内容。

【解决方案2】：

由于多种原因，我无法按照推荐的方式使用类，我最终在同事的帮助下围绕我的用例构建了一个 for 循环，代码如下：

function checkIfAnotherElementIsZero(e) {
        var canSubmit = true;
        for (let i = 1; i <= 24; i++)
        {
            if ($("#Element" + i).val() != 0 && $("#AnotherElement" + i).val() == 0) 
            {
                alert('Error');
                canSubmit = false;
                break;
                e.preventDefault();
            }
        }
        if (canSubmit == true)
        {
             $( "input[name=Date]" ).addClass( "data-val-ignore" );
             $( "#@ContextControllerName" ).submit();
        }
        else
        {
            e.preventDefault();
        }
    }

【讨论】：