JavaScript：使用for回圈將文本從陣列附加到h1-有解無憂

我是 JavaScript 的初學者，不知道如何解決這個簡單的問題。我想從帶有 for 回圈的陣列中添加 h2 中的文本

$(document).ready(function () {
  const titles = ["Title 1", "Title 2", "Title 3", "Title 3"];
  for (let i = 0; i < titles.length; i  ) {
        var addText = "<h2>";
        addText  = titles[i];
        addText  = "</h2>";
    $(".ic-table-h2").append(addText);
  };
});

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<div class="container">
 <div class="ic-table-h2"></div>
 <div class="ic-table-h2"></div>
 <div class="ic-table-h2"></div>
 <div class="ic-table-h2"></div>
</div>

uj5u.com熱心網友回復：

我不確定我是否正確理解了您的問題，但我會像這樣解決您的問題（重建容器內的整個 html，因為這樣您可以靈活地使用陣列大小??）：

$(document).ready(function () {
  const titles = ["Title 1", "Title 2", "Title 3", "Title 3"];

  var html = ''; 
  for (let i = 0; i < titles.length; i  ) {
        html  = "<div class='ic-table-h2'><h2>" titles[i] "</h2></div>"; 
  };

  $(".container").html(html); 

});

然后，您可以將 html 簡化為：

<div class="container">
</div>

會在 HTML 中給你這個輸出：

<div class="container"><div class="ic-table-h2"><h2>Title 1</h2></div><div class="ic-table-h2"><h2>Title 2</h2></div><div class="ic-table-h2"><h2>Title 3</h2></div><div class="ic-table-h2"><h2>Title 3</h2></div></div>

uj5u.com熱心網友回復：

$(document).ready(function () {
  const titles = ["Title 1", "Title 2", "Title 3", "Title 3"];
  for (let i = 0; i < titles.length; i  ) {
        var addText = "<h2>";
        addText  = titles[i];
        addText  = "</h2>";
    document.querySelectorAll(".ic-table-h2")[i].append(addText);
  };
});

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<div class="container">
 <div class="ic-table-h2"></div>
 <div class="ic-table-h2"></div>
 <div class="ic-table-h2"></div>
 <div class="ic-table-h2"></div>
</div>

uj5u.com熱心網友回復：

與其嘗試在 h2 中添加文本，不如將 h2 附加到容器 div 中。

例如：

   $(".container").append(addText);

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/518647.html

標籤：javascriptjQuery

上一篇：當跨度內的數字大于0時添加類

下一篇：嘗試使用jQuery使引導導航欄具有粘性