javascript - 使用 jQuery 将动态内容添加到多个元素

Question

当然这很简单，但由于不知道要搜索的确切单词，所以很难找到答案:/

另外，如果有更好的方法请告诉我；)

基本上我生成了一些包含各种内容和标题的 div 框

所以在我的 html 页面中我有:

<div class="itdSec" data-title="What is This">
    This is a magical div box with some stuff in it
</div>

在我的 js 文件中有

$(".itdSec").prepend("<div class='itdSecTit'>" + this.data("title") + "</div>");

目的是在该 div 的顶部添加一个 div，其中包含 data-title 属性的内容

“this”导致错误，因为这仍然是主页。并在其位置使用 $(".itdSec") 每次都会返回第一个。

Answer 1

这个有效:

$(function(){
  $(".itdSec").prepend(function() {
    return "<div class='itdSecTit'>" + $(this).data("title") + "</div>";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="itdSec" data-title="What is This">
    This is a magical div box with some stuff in it
</div>

或者你可以这样做:

$(function(){
  $(".itdSec").each(function() {
    $(this).prepend("<div class='itdSecTit'>" + $(this).data("title") + "</div>");
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="itdSec" data-title="What is This">
  This is a magical div box with some stuff in it
</div>