Question

我有以下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>

我需要创建一个数组，其中包含ID为"result" +数字的每个范围中的值。

这是我写的循环：

   $("#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 = [];
     for(var i = 0; i < childElements.length; i++) {
        hotelNames.push(sortable.children[childElements[i]].children[0].innerHTML);
     }
     alert(hotelNames)
   })

在我的控制台中，出现以下错误：

我将childElements.length替换为以下数字：

     for(var 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);
 }

结果：

一旦我转到“ 11”，就会发生错误。

我确定自己做错了明显的事，但我无法终生解决。.

Answer 1

在尝试访问.children之前，需要检查.children[0]是否长。在<div class = "sortableItem day hidden"></div> 之类的情况下，该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)

Answer 2

您可以使用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)
})

Answer 3

正如您所说的，它适用于i<10，让我们看看何时i=10。

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   ^

当i=11 childElements[10]给出值为15时。

对于以下代码，

sortable.children[childElements[i]].children[0].innerHTML

=> sortable.children[childElements[11]].children[0].innerHTML

=> sortable.children[15].children[0].innerHTML

现在查看您的HTML，sortable.children[15]是：

<div class = "sortableItem day hidden"></div> 

如果您看到它，它没有任何子代，因此sortable.children[15].children[0]将给出undefined。而且，当您尝试访问JavaScript中undefined上的任何键时，都是错误的。

您可以在尝试访问该值之前先对其进行检查，或者将其置于try catch块中。

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

当要求循环10次以上时，For循环会导致错误

3 个答案: