如何访问所有子项并使用for循环逐个更改文本

How do I access all children and change the text one by one using for loop?

本文关键字：循环 for 文本 何访问 访问      更新时间：2024-03-27

考虑以下HTML代码：

<div id="id1">
    <div id="id2"></div><br>
    <div id="id3"></div>
    <br>
    <div id="id2"></div><br>
    <div id="id3"></div>
    <br>
    <div id="id2"></div><br>
    <div id="id3"></div>
    <br>
</div>

这是我的剧本：

for($olindex=0; $olindex<3; $olindex++){
    $("#id1").children("#id3").eq($olindex).text(result2[$olindex]);
}

现在事情不起作用了：result2[$olindex]没有什么问题，但文本仍然没有显示在id3的每个元素中。也许我写错了DOM代码。我如何更正或更改它以使其工作？

您的选择器不正确。如果要按ID选择元素，请使用#:

var result2 = [0,1,2];
for(var $olindex=0; $olindex<3; $olindex++) {
  $("#id1").children("#id3").eq($olindex).text(result2[$olindex]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1">
    <div id="id2"></div>
    <div id="id3"></div>
    <div id="id2"></div>
    <div id="id3"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

也就是说，ID必须是唯一的。使用另一种方法，例如类。

您使用了几个具有相同ID的div元素。每个element的ID应该是唯一的，这会导致您的问题。

您最好将classes用于您的div:

<div id="id1">
    <div class="id2"></div><br>
    <div class="id3"></div>
    <br>
    <div class="id2"></div><br>
    <div class="id3"></div>
    <br>
    <div class="id2"></div><br>
    <div class="id3"></div>
    <br>
</div>

然后，您可以将JQuery Selector与一个类一起使用：

$("#id1").children(".id3")

我认为这就是您想要实现的：

'<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<div id="id1">
    <div id="id2"></div><br>
    <div id="id3"></div>
    <br>
    <div id="id2"></div><br>
    <div id="id3"></div>
    <br>
    <div id="id2"></div><br>
    <div id="id3"></div>
    <br>
</div>
<script>
for($olindex=0; $olindex<3; $olindex++){                     
    $("#id1").children("#id3").eq($olindex).text(result2[$olindex]);
}
</script>'

如果使用ID，则需要使用"#"，而不是"."。"."用于类。此外，我不建议对多个元素使用相同的ID。

相关文章：