Javascript 当要求循环10次以上时导致错误的For循环

我有以下HTML：

<form id = "sortable" class="ui-state">
    <div class = "sortableItem day">Monday</div> <!-- 0 -->
    <div class = "sortableItem swapable ui-state-default"> <!-- 1 -->
        <span id="result1"></span>
        <span id="address1" class="hidden"></span>
        <span id="contact1" class="hidden"></span>
        <span id="tel1" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 2 -->
        <span id="result2"></span>
        <span id="address2" class="hidden"></span>
        <span id="contact2" class="hidden"></span>
        <span id="tel2" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 3 -->
        <span id="result3"></span>
        <span id="address3" class="hidden"></span>
        <span id="contact3" class="hidden"></span>
        <span id="tel3" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 4 -->
        <span id="result4"></span>
        <span id="address4" class="hidden"></span>
        <span id="contact4" class="hidden"></span>
        <span id="tel4" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 5 -->
        <span id="result5"></span>
        <span id="address5" class="hidden"></span>
        <span id="contact5" class="hidden"></span>
        <span id="tel5" class="hidden"></span>
    </div>


    <div class = "sortableItem day">Tuesday</div> <!-- 6 -->
    <div class = "sortableItem day hidden"></div> <!-- 7 -->

    <div class = "sortableItem swapable ui-state-default"> <!-- 8 -->
        <span id="result6"></span>
        <span id="address6" class="hidden"></span>
        <span id="contact6" class="hidden"></span>
        <span id="tel6" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 9 -->
        <span id="result7"></span>
        <span id="address7" class="hidden"></span>
        <span id="contact7" class="hidden"></span>
        <span id="tel7" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!--10 -->
        <span id="result8"></span>
        <span id="address8" class="hidden"></span>
        <span id="contact8" class="hidden"></span>
        <span id="tel8" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 11 -->
        <span id="result9"></span>
        <span id="address9" class="hidden"></span>
        <span id="contact9" class="hidden"></span>
        <span id="tel9" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 12 -->
        <span id="result10"></span>
        <span id="address10" class="hidden"></span>
        <span id="contact10" class="hidden"></span>
        <span id="tel10" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 13 -->
        <span id="result11"></span>
        <span id="address11" class="hidden"></span>
        <span id="contact11" class="hidden"></span>
        <span id="tel11" class="hidden"></span>
    </div>


    <div class = "sortableItem day">Wednesday</div> <!-- 14 -->
    <div class = "sortableItem day hidden"></div> <!-- 15 -->

    <div class = "sortableItem swapable ui-state-default"> <!-- 16 -->
        <span id="result12"></span>
        <span id="address12" class="hidden"></span>
        <span id="contact12" class="hidden"></span>
        <span id="tel12" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default">  <!-- 17 -->
        <span id="result13"></span>
        <span id="address13" class="hidden"></span>
        <span id="contact13" class="hidden"></span>
        <span id="tel13" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 18 -->
        <span id="result14"></span>
        <span id="address14" class="hidden"></span>
        <span id="contact14" class="hidden"></span>
        <span id="tel14" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 19 -->
        <span id="result15"></span>
        <span id="address15" class="hidden"></span>
        <span id="contact15" class="hidden"></span>
        <span id="tel15" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 20 -->
        <span id="result16"></span>
        <span id="address16" class="hidden"></span>
        <span id="contact16" class="hidden"></span>
        <span id="tel16" class="hidden"></span>
    </div>


    <div class = "sortableItem day">Thursday</div> <!-- 21 -->
    <div class = "sortableItem day hidden"></div> <!-- 22 -->

    <div class = "sortableItem swapable ui-state-default"> <!-- 23 -->
        <span id="result17"></span>
        <span id="address17" class="hidden"></span>
        <span id="contact17" class="hidden"></span>
        <span id="tel17" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 24 -->
        <span id="result18"></span>
        <span id="address18" class="hidden"></span>
        <span id="contact18" class="hidden"></span>
        <span id="tel18" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 25 -->
        <span id="result19"></span>
        <span id="address19" class="hidden"></span>
        <span id="contact19" class="hidden"></span>
        <span id="tel19" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 26 -->
        <span id="result20"></span>
        <span id="address20" class="hidden"></span>
        <span id="contact20" class="hidden"></span>
        <span id="tel20" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 27 -->
        <span id="result21"></span>
        <span id="address21" class="hidden"></span>
        <span id="contact21" class="hidden"></span>
        <span id="tel21" class="hidden"></span>
    </div>


    <div class = "sortableItem day">Friday</div> <!-- 28 -->
    <div class = "sortableItem day hidden"></div> <!-- 29 -->

    <div class = "sortableItem swapable ui-state-default"> <!-- 30 -->
        <span id="result22"></span>
        <span id="address22" class="hidden"></span>
        <span id="contact22" class="hidden"></span>
        <span id="tel22" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 31 -->
        <span id="result23"></span>
        <span id="address23" class="hidden"></span>
        <span id="contact23" class="hidden"></span>
        <span id="tel23" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 32 -->
        <span id="result24"></span>
        <span id="address24" class="hidden"></span>
        <span id="contact24" class="hidden"></span>
        <span id="tel24" class="hidden"></span>
    </div>

    <div class = "sortableItem swapable ui-state-default"> <!-- 33 -->
        <span id="result25"></span>
        <span id="address25" class="hidden"></span>
        <span id="contact25" class="hidden"></span>
        <span id="tel25" class="hidden"></span>
    </div>

在我的控制台中，我得到以下错误：

我用如下数字替换了

childElements.length

：

     for(var i = 0; i < 25; i++) {
       hotelNames.push(sortable.children[childElements[i]].children[0].innerHTML);
     }

for（变量i=0；i<25；i++）{
hotelNames.push（sortable.children[childElements[i]].children[0].innerHTML）；
}

我又犯了同样的错误

但是，当我输入一个不大于10的值时，它会起作用：

 for(var i = 0; i < 10; i++) {
   hotelNames.push(sortable.children[childElements[i]].children[0].innerHTML);
 }

for（变量i=0；i<10；i++）{
hotelNames.push（sortable.children[childElements[i]].children[0].innerHTML）；
}

结果:

当我转到'11'时，错误就发生了

---

我肯定我做了一些明显错误的事情，但我一辈子都无法弄清楚这一点。

在尝试访问

.children[0]

之前，您需要检查

.children

是否有长度。在像

这样的情况下，

div

没有子项。因此，只需在推送前添加一张支票，如：

var elem = sortable.children[childElements[i]]
if (elem && elem.children && elem.children.length) hotelNames.push(...

可以说，更好的方法是使用

querySelectorAll

仅获取所需的节点

var sortableItems = sortable.querySelectorAll('.sortableItem > span:first-child')
for(var i = 0; i < sortableItems.length; i++){
  hotelNames.push(sortableItems[i].innerHTML)
}
alert(hotelNames)

var-sortableItems=sortable.querySelectorAll（'.sortableItem>span:first-child'））
对于（var i=0；i

您可以使用

map

$("#clickMe").click(function() {

  var childElements = [1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 29, 30, 31, 32, 33];

  var hotelNames = childElements.map(i => $('#result'+i).text());

  alert(hotelNames)
})

---

正如您所说，它适用于

i提供完整的代码示例会很有帮助。“Hotel”这个词是从哪里来的？谢谢@vatz88，我想我已经盯着它看了这么久，再也看不到错误了！但是，你是对的，我的childElements数组是错的！现在一切都好了。再次感谢
$("#clickMe").click(function() {

  var childElements = [1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 29, 30, 31, 32, 33];

  var hotelNames = childElements.map(i => $('#result'+i).text());

  alert(hotelNames)
})

var childElements = [1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 15, 16, ...];
// ...............i = 0  1  2  3  4  5  6  7   8   9   ^

// Check before accessing innerHTML value
if(sortable.children[childElements[i]].children[0]){
   hotelNames.push(sortable.children[childElements[i]].children[0].innerHTML);
}