jQuery if 语句在 for 循环中不起作用

Posted 2023-05-09

【中文标题】jQuery if 语句在 for 循环中不起作用

【英文标题】：jQuery if statement not working inside for loop

【发布时间】：2018-10-19 21:27:26

【问题描述】：

我无法找出问题所在。当我在 IF 语句中使用 '#account-funding-'+i 但与 '#account-funding-0' 一起使用时，它不起作用。我需要能够遍历未知数量的对象数组。我做错了什么？

HTML * 页面上可以有 X 个 .funding-content div。每个带有 -0 的 ID 都会从 js 中递增

<form id="accountform" name="accountForm">

 <div class="funding-content funding-selected-0">
   <div class="container">
    <h3>Funding for [account selected]</h3>

     <div class="funding-type-transfer" id="funding-type-transfer-0">

       <div class="form-inputs">
         <div class="lx-grid lx-grid--gutters">
           <div class="lx-grid__cell lx-grid__cell--1-2--above-md">
             <label for="account-funding-0">Routing Number</label>
             <input id="account-funding-0" type="text" maxlength="9">
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</form>

不起作用：

var amountOfAccounts = $( '#account-form .funding-content' ).length;

for ( i = 0; i <= amountOfAccounts; i++ ) 

    if ( $( '#account-funding-'+i ).val() == '' ) 
        document.getElementById( 'account-funding-'+i ).setCustomValidity( 'Routing Number is a required field.' );
    

作品：

var amountOfAccounts = $( '#account-form .funding-content' ).length;

for ( i = 0; i <= amountOfAccounts; i++ ) 

    if ( $( '#account-funding-0' ).val() == '' ) 
        document.getElementById( 'account-funding-'+i ).setCustomValidity( 'Routing Number is a required field.' );
    

【问题讨论】：

也添加您的 html

'#account-funding-'+i 确实会导致 '#account-funding-0' 所以我觉得这开始成为一个 XY 问题。您看到什么不起作用？

它应该工作。话虽如此，页面可能没有完全加载，这会导致错误。在您发布 HTML 之前很难诊断

拥有一系列像这样的ids 是一种反模式。只需循环通过 $("#account-form .funding-content") 返回的 jQuery 集。

@T.J.Crowder...谢谢您的建议。看起来就像将 一样简单

【参考方案1】：

显然，索引与某处的元素不匹配。但是，你不需要这样做。 JQuery 提供了一个 .each() 方法来循环遍历对象，因此您不必担心任何这些：

$( '#account-form .funding-content' ).each(function(index, element)
   if(element.val() !== "")
      // Do something
   
);

【参考方案2】：

如果我理解正确，您在循环中没有得到正确的id？ 如果是，请将您的循环变量设置为let，这样它就不会被提升并且是块范围，对于这个循环。

此外，要遍历正确数量的元素，请使用 < 而不是 <=。

看看这对你有没有帮助。 （或者我理解的完全错误，如果是这样，我可以做一些调整或删除这个答案）

var amountOfAccounts = $('#account-form .funding-content').length;

for (let i = 0; i < amountOfAccounts; i++ ) 
    var elemValue = $( '#account-funding-'+i ).val();
    if ( elemValue == '' || elemValue == null) 
        console.log('empty value');
    else
        console.log(elemValue);
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="account-form">
 <input value="abc" class='funding-content' id="account-funding-0">
  <input value="" class='funding-content' id="account-funding-1">
 <input value="def" class='funding-content' id="account-funding-2">
 <input value="" class='funding-content' id="account-funding-3">
</div>

【讨论】：

谢谢。您和@T.J Crowder 的回答最终解决了这个问题。我只需要将