Question

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

我还有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>

无论如何，这感觉不太好。我该怎么做才能做到这一点？我怎样才能修改和/或优化我的代码？

Answer 1

哇，你会遇到问题，尤其是在尝试维护代码时。

您尝试替换的文本是来自后端还是其他数据源？或者它只是像你在你的例子中建议的那样是静态的？

无论哪种方式，我都会考虑将数据转换为更有用的格式，例如数组或JSON对象。

self.answer_label['foreground'] = 'red'

一旦你掌握了迭代的数据，你的下一个挑战就是如何尽可能快地将所有数据传递到DOM，而不会使浏览器滞后于200 .html（）或.append（）函数。我可以给出的最佳建议是查看模板引擎，例如JSRender https://www.jsviews.com/，（易于使用且易于设置）。

从那里你可以将数组发送到模板引擎并让它进行大量循环。

//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...",
    "..."
];

使用JSRender的API，您将返回一个大的HTML字符串，然后您可以在$（＆＃34; .divWrapper＆＃34;）中使用.html（returnedData）;

至少通过这种方式你只需要一次性地缩小DOM而不是数百种.html（）函数。

Answer 2

我只想使用一个简单的for循环并将索引与选择器

连接起来

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

Answer 3

您可以尝试查询包含divvi字符串的所有div $('div[id*="divvi"]')，然后致电.each

Answer 4

如果＆＃34; HTML代码和文字＆＃34;因为每个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>

进一步说明：

<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>

jQuery并尽可能快地替换200 div的内容

4 个答案: