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

Posted 2023-04-13

【中文标题】使用 jQuery 将动态内容添加到多个元素

【英文标题】：Prepend dynamic content to multiple elements with jQuery

【发布时间】：2014-10-10 09:48:13

【问题描述】：

当然这是一个简单的问题，但是由于不知道要搜索的确切单词而很难找到答案：/

如果有更好的方法请告诉我;)

基本上我正在生成一些具有各种内容和标题的 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 arribute 的内容

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

【参考方案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>

【讨论】：

那里有两个相同的 jsfiddle 链接 ;)

@ngmir Whops :) 我把它改成了新的 *** sn-ps。

【参考方案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 作为当前正在迭代的元素。

【讨论】：

但是 prepend 不能对一个元素起作用，而是一次对一个元素起作用，你也可以直接将一个函数放入 prepend 以迭代元素。