使用JQuery的“追加”功能，如何将相同的字符串添加到具有相同类的所有div中？ （仅可使用一次）

Question

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

HTML

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

JQuery：

    <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次时，它才能达到我期望的效果，所以这是一个不好的解决方案。

Demo： https://codepen.io/MichaelROS/pen/QWwgXEB

我该怎么办？请不要建议使用与Append不同的功能。

注意：代码很长，它不只是写一个字，我这样做是为了说明此示例中已经存在的问题。

Answer 1

重点是循环。故事：获取具有此类的元素。然后进行循环。并为每个元素添加子元素。

这时有不同的解决方案。

我给你一些钥匙：-jQuery.each function-document.getElementsByClassName

这里是一个类似的问题。jQuery .text() multiple elements same class

希望我能提供帮助

Answer 2

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

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

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

Answer 3

我知道了。它正在添加脚本标记就很好了，而只是其中的未执行脚本。所以我采用了另一种方法：

NEW HTML

Text
<div class="custom-content"><script>customtag();</script></div>
Text
<div class="custom-content"><script>customtag();</script></div>
Text
<div class="custom-content"><script>customtag();</script></div>
Text

NEW JS：

function customtag() {
if ($(window).width() < 500) {
document.write('Small');
} else {
document.write('Large');
}
}