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>

Answer 2

使用$('.itdSec')，您正在选择课程.itdSec的所有元素，但prepend仅适用于一个元素。

您需要做的是使用jQuery's .each()迭代所有选定的元素，并为每个元素添加标题。

$('.itdSec').each(function(i) {
    // 'i' is the index (0,1,2,3...) - not needed here

    // 'this' is now every element in turn
    var title = $(this).data('title');

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

(JSFiddle)

在.each（）循环中，您可以使用this作为当前正在迭代的元素。

使用jQuery将动态内容预先添加到多个元素

2 个答案: