使用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，其中包含数据标题arribute 的内容

"这个"导致了错误，因为这仍然是主页面。并且使用CCD_ 1代替它每次返回第一个。

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的.ech（）对所有选定的元素进行迭代，并为每个元素预先设置标题。

$('.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作为当前正在迭代的元素。