Javascript 将子div附加到父对象的每个实例

我有一个div（rateRibbon），我正在将它添加到随机数的父类div中，每次父类（rateRibbon）存在时，都需要附加四个子div

我如何循环直到它达到4，然后停止，而不是向每个父级添加四个子div

如何将每个新的（rateRibbon）及其4个子项附加到每个rateTypeLineItems

以下是我的JQuery：

//prepend rate ribbon at the top of each room rate type
$('.rateTypeLineItems').prepend('<div class="rateRibbon"> <!-- this is a container div --> </div>');

//prepend messaging container into rate ribbon
$('.rateRibbon').prepend('<div class="posMsg"></div><div class="posMsg"></div><div class="posMsg"></div><div class="posMsg"></div>');

//append messaging content every time "rateRibbon" loads
$('.rateRibbon:eq(0)').each(function (i) {
    $('.posMsg:eq(0)').append('<h3>Best Price Guarantee</h3><p>Get the lowest price for our hotels. We Guarantee it.</p>');
    $('.posMsg:eq(1)').append('<h3>IHG Rewards Club</h3><p>Be part of the world’s best hotel rewards program.</p>');
    $('.posMsg:eq(2)').append('<h3>A Guaranteed Room</h3><p>Book directly with IHG to guarantee your room.</p>');
    $('.posMsg:eq(3)').append('<h3>No Booking Fees</h3><p>There are no hidden booking fees when booking direct.</p>');
});

//在每个房价类型的顶部预先设置房价功能区
$（'.rateTypeLineItems'）。前置（''）；
//将消息容器预先放入速率功能区
$（'.rateRibbon'）。前置（''）；
//每次加载“rateRibbon”时追加消息内容
$（'.rateRibbon:eq（0）'）。每个（函数（i）{
$（'.posMsg:eq（0）'）。追加（'最佳价格保证为我们的酒店获得最低价格。我们保证。
'）；
$（'.posMsg:eq（1）'）。追加（'IHG奖励俱乐部成为世界最佳酒店奖励计划的一部分。
'）；
$（'.posMsg:eq（2）'）。追加（'担保房间直接向IHG预订，以担保您的房间。
'）；
$（'.posMsg:eq（3）'）.append（'无预订费用直接预订时没有隐藏的预订费用。
'）；
});

---

还有一个指向my.

的链接，将您的每条消息存储在一个变量中，并将它们合并到.rate功能区的包含中，这样它就可以一次发生，而不必查询DOM太多

这是小提琴：

修改脚本的关键部分：

var msg1 = '<h3>Best Price Guarantee</h3><p>Get the lowest price for our hotels. We Guarantee it.</p>';
var msg2 = '<h3>IHG Rewards Club</h3><p>Be part of the world’s best hotel rewards program.</p>';
var msg3 = '<h3>A Guaranteed Room</h3><p>Book directly with IHG to guarantee your room.</p>';
var msg4 = '<h3>No Booking Fees</h3><p>There are no hidden booking fees when booking direct.</p>';

//prepend messaging container into rate ribbon
//var rateRibbon = '<div class="posMsg"></div>';
$('.rateRibbon').prepend('<div class="posMsg">'+msg1+'</div><div class="posMsg">'+msg2+'</div><div class="posMsg">'+msg3+'</div><div class="posMsg">'+msg4+'</div>');

var msg1='最佳价格保证为我们的酒店提供最低价格。我们保证；
var msg2=“IHG奖励俱乐部成为世界最佳酒店奖励计划的一部分。
”；
var msg3=“保证房间直接向IHG预订，以保证您的房间。
”；
var msg4='无预订费用直接预订时没有隐藏的预订费用。
'；
//将消息容器预先放入速率功能区
//var rateRibbon=''；
$（'.rateRibbon'）。前置（''+msg1+''+msg2+''+msg3+''+msg4+''）；

有很多方法可以解决这个问题，但首先要从基础开始，循环浏览每个费率功能区-

$('.rateRibbon').each(function (i) {
    $(this).prepend('<div class="posMsg"></div><div class="posMsg"></div><div class="posMsg"></div><div class="posMsg"></div>');
    $(this).find('.posMsg:eq(0)').append('<h3>Best Price Guarantee</h3><p>Get the lowest price for our hotels. We Guarantee it.</p>');
    $(this).find('.posMsg:eq(1)').append('<h3>IHG Rewards Club</h3><p>Be part of the world’s best hotel rewards program.</p>');
    $(this).find('.posMsg:eq(2)').append('<h3>A Guaranteed Room</h3><p>Book directly with IHG to guarantee your room.</p>');
    $(this).find('.posMsg:eq(3)').append('<h3>No Booking Fees</h3><p>There are no hidden booking fees when booking direct.</p>');
});

$（'.rateRibbon'）。每个（函数（i）{
$（this.prepend（“”）；
$（this）.find（'.posMsg:eq（0）'）.append（'Best Price Guarrance获取我们酒店的最低价格。我们保证。
'）；
$（此）。查找（'.posMsg:eq（1）'）。附加（'IHG奖励俱乐部成为世界最佳酒店奖励计划的一部分。
'）；
$（此）。查找（'.posMsg:eq（2）'）。追加（'担保房间直接向IHG预订，以担保您的房间。
'）；
$（this）.find（'.posMsg:eq（3）'）.append（'无预订费用直接预订时没有隐藏的预订费用。
）；
});

---

当然，您的代码可以进一步增强，具体取决于您想要做什么。

一些建议：使用函数。如果你在处理代码块，它们会让你的生活变得更加轻松。你可以将问题简化为你遇到的问题。这有点难理解。只显示问题中出现的HTML，只显示相关的jQuery。哦，是的！！！就这样！我正在参加一个新的演出，经常遇到这种情况。我会尽可能多地保存和重用它。虽然我相信过一段时间我会明白的。谢谢你，雷德丽娜！！谢谢你，杰！这也是一种固溶体。我将来一定会保留和使用它。

$('.rateRibbon').each(function (i) {
    $(this).prepend('<div class="posMsg"></div><div class="posMsg"></div><div class="posMsg"></div><div class="posMsg"></div>');
    $(this).find('.posMsg:eq(0)').append('<h3>Best Price Guarantee</h3><p>Get the lowest price for our hotels. We Guarantee it.</p>');
    $(this).find('.posMsg:eq(1)').append('<h3>IHG Rewards Club</h3><p>Be part of the world’s best hotel rewards program.</p>');
    $(this).find('.posMsg:eq(2)').append('<h3>A Guaranteed Room</h3><p>Book directly with IHG to guarantee your room.</p>');
    $(this).find('.posMsg:eq(3)').append('<h3>No Booking Fees</h3><p>There are no hidden booking fees when booking direct.</p>');
});