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

【问题标题】：Using JQuery "Append" function, how to add same string to all divs with same class? (Only works once)使用JQuery“追加”功能，如何将相同的字符串添加到具有相同类的所有div？（只工作一次）
【发布时间】：2019-12-26 00:03:14
【问题描述】：

使用 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 次时，它才会按照我的预期进行，这是一个糟糕的解决方案。

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

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

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

【问题讨论】：

似乎无法复制这个问题 - Codepen.io to demonstrate
对不起，我将代码简化太多以简化问题，它解决了问题。我现在包含了一个不太简化的版本。你能回头看吗？问题可能与转义脚本结束标记有关？笔记。附加的脚本要长得多，它不只是说一个字。
尝试使用.each() 示例$('.custom-content').each(function(){ $(this).append('Content Here to Append'); });
@YashKaranke 它将它添加到最后一个 DIV 的 3 次，请参阅 codepen.io/MichaelROS/pen/zYxzJbR

标签： jquery append

【解决方案1】：

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

此时有不同的解决方案。

我给你几个关键： - jQuery.each function - document.getElementsByClassName

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

希望能帮到你

【讨论】：

如果找不到其他方法，我会尝试。我希望有一种简单的方法可以定位所有 div，而无需执行循环。

【解决方案2】：

请看这里：https://www.w3schools.com/jsref/met_doc_write.asp 声明：

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

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

【讨论】：

真正的代码不是文档。写它只是为了说明它不起作用。这是一个远程脚本。
还有什么方法可以用来测试追加？

【解决方案3】：

我想通了。它附加脚本标签就好了，它只是不执行其中的脚本。所以我采用了不同的方法：

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

新的 JS：

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

【讨论】：