jQuery并尽快替换200个div的内容

我有200个div的id是divvi1。。。divvi200

<div id="divvi1">Text 1</div>
<div id="divvi2">Text 2</div>
<div id="divvi3">Text 3</div>
...
<div id="divvi198">Text 198</div>
<div id="divvi199">Text 199</div>
<div id="divvi200">Text 200</div>

Text 1
文本2
文本3
...
案文198
文本199
文本200

我还有200行JavaScript/jQuery代码，它们将用新文本替换我div的旧文本。以下是一个例子：

<script>$('#divvi1').html('Lots of HTML code and text dggssgsdgs...');</script>
<script>$('#divvi2').html('Lots of HTML code and text fddgdsg...');</script>
<script>$('#divvi3').html('Lots of HTML code and text asdsdadad...');</script>
...
<script>$('#divvi198').html('Lots of HTML code and text fdffsdfdf...');</script>
<script>$('#divvi199').html('Lots of HTML code and text dasdsad...');</script>
<script>$('#divvi200').html('Lots of HTML code and text hfhfhfhf...');</script>

$（'#divvi1'）.html（'大量html代码和文本DGGSSGSDG…'）；
$（'#divvi2'）.html（'大量html代码和文本fddgdsg…'）；
$（'#divvi3'）.html（'大量html代码和文本asdsdadad…'）；
...
$（'#divvi198'）.html（'大量html代码和文本fdffsdfdf…'）；
$（'#divvi199'）.html（'大量html代码和文本dasdsad…'）；
$（'#divvi200'）.html（'大量html代码和文本hfhf…'）；

---

不管怎么说，这感觉不太好。我真的应该如何做这项工作？如何修改和/或优化代码？

您可以尝试查询所有包含

divvi

字符串的div

---

$（'div[id*=“divvi”]'）

然后调用

。每个
我只需使用一个简单的for循环并将索引与选择器连接起来

for(var i=1;i<=200;i++){
    $('#divvi' + i).html('Lots of HTML code and text...');
}

for（var i=1；i哇，您会很快遇到问题，尤其是在尝试维护代码时

您试图替换的文本是来自后端还是其他数据源？还是像您在示例中建议的那样是静态的
无论哪种方式，我都会考虑将数据转换成更有用的格式，例如数组或JSON对象

//Example array
var myText = [
    "Lots of HTML code and text...",
    "Lots of HTML code and text...",
    "Lots of HTML code and text...",
    "Lots of HTML code and text...",
    "..."
];

一旦你有了可以迭代的数据，你的下一个挑战就是如何让所有数据尽可能快地进入DOM，而不让浏览器落后于200.html（）或.append（）函数。我能给出的最好建议是看看模板引擎，比如JSRender（易于使用和设置）

从那里，您可以将数组发送到模板引擎，让它执行重循环

//Example JSRender loop
{{for myText}}
    <div>{{>city}}</div>
{{/for}}

//示例JSRender循环
{{对于myText}}
{{>城市}
{{/for}}

然后，使用JSRender的API将返回一个大的HTML字符串，您可以在$（“.divWrapper”）.HTML（returnedData）中使用该字符串

至少通过这种方式，您只需一次操作DOM，而不是数百个.html（）函数。
如果“html代码和文本”对于来自数据库的每个div，我假设您使用的是php，在这种情况下，我建议您使用JSON对象保存所有200个条目。此外，我假设您使用的是AJAX，因为如果您可以直接发送整个HTML输出，那么使用Javascript是没有意义的

<?php
    $my_divs_content = array(
        'Lots of HTML code and text dggssgsdgs...',
        'Lots of HTML code and text fddgdsg...',
        'Lots of HTML code and text asdsdadad...',
        // And so on
    );
?>
<script type="text/javascript">
    var myDivsContent = <?php echo json_encode($my_divs_content); ?>;
</script>


var myDivsContent=；

详情如下：

<script type="text/javascript">
    $("div[id^='divvi']").each(function() {
        var index = parseInt($(this).attr("id").replace("divvi", ""));
        if (typeof myDivsContent[index] !== "undefined") {
            $(this).html(myDivsContent[index]);
        }
    });
</script>


$（“div[id^='divvi']）{
var index=parseInt（$（this）.attr（“id”）.replace（“divvi”，“id”））；
if（myDivsContent[索引]的类型！=“未定义”）{
$（this.html（myDivsContent[index]）；
}
});
是不是每个div都有很多HTML代码和文本DGGSSGSDG…
相同？在哪里可以找到“HTML代码和文本”from？不，每个div上的文本不同。文本将来自数据库。那么您如何从数据库保存数据？它只是一个数组还是在一个对象中？我想说Chris Hull的答案将是最简单的，如果与数据库中的数据相结合，因为它也在一个数组中。每个div上的文本不能相同。它正在运行完全取决于文本需要如何匹配到每个“#divvi”+i。如果它来自数据库，它将是它需要替换的顺序吗？如果是，那么您也可以迭代该列表。无论如何，for循环+$（）.html是替换200 div内容的最佳和最快的方法吗？.html（）对浏览器来说，这仍然是一个沉重的调用，这种类型的循环将对CPU和内存造成巨大的冲击。如果您想在不考虑性能的情况下执行，那么这将是一种可能性，但这确实是不明智的。如果您必须以这种方式执行，则使用一个.html（）hit.var htmlStr=“”；更安全（var i=1；我认为它应该很快，不需要太多内存。这真的是说200倍$（this）.html（myDivsContent[index]）；的最好方式吗？不，他们在哪里声明他们正在使用PHP，所以这真的不能回答问题。总之，我正在使用PHP。用South Park明智的话说……如果你使用带.html（）的循环，“你会过得很糟糕”@xms，您不会重复
$（this）.html（myDivsContent[index]）；
200次。您对Javascript有多熟悉，jQuery？JSRender的商业使用是否100%免费？是的，您的代码是否用新文本替换200 div的旧内容？我在这里看不到替换函数。替换发生在.parent（）处这就是为什么我有一个$（“.divWrapper”）.html（returnedData），“returnedData”将包含200个div以及从数组中输入的文本。在JSRender API中了解更多信息-下面是一个使用JSON对象循环多个数据键的示例。使用平面数组时，您的实现将简单得多。