时间戳

首页 > 解决方案 > 使用JQuery“追加”功能，如何将相同的字符串添加到具有相同类的所有div？（只工作一次）

jquery - 使用JQuery“追加”功能，如何将相同的字符串添加到具有相同类的所有div？（只工作一次）

问题描述

使用 JQuery Append 我想用 HTML 填充一个 div，对于页面上同一类的所有实例都是相同的。

HTML

Text
<div class="custom-content"></div>
Text
<div class="custom-content"></div>
Text
<div class="custom-content"></div>
Text

查询：

    <script>
      if ($(window).width() < 500) {
  $(".custom-content").append("<script>document.write('Small');<\/script>");
} else {
  $(".custom-content").append("<script>document.write('Large');<\/script>");
}
    </script>

我期待“大”或“小”出现在所有 3 个 div 上，如下所示：

预期输出：

Text
<div class="custom-content">Large</div>
Text
<div class="custom-content">Large</div>
Text
<div class="custom-content">Large</div>
Text

只有当我将脚本复制 3 次时，它才会按照我的预期进行，这是一个糟糕的解决方案。

演示： https ://codepen.io/MichaelROS/pen/QWwgXEB

我能做些什么？请不要建议使用与 Append 不同的函数。

注意：代码很长，它不仅写了 1 个单词，我这样做是为了说明本示例中已经存在的问题。

标签： jqueryappend

解决方案

请参阅此处：https ://www.w3schools.com/jsref/met_doc_write.asp其中指出：

该write()方法主要用于测试：如果在HTML文档完全加载后使用，它将删除所有现有的HTML。

（强调我的）它只是第一次被调用，因为在那之后，文档不再包含执行代码。我不确定您到底要完成什么，但document.write可能不是最好的解决方案。

推荐阅读