将子 div 附加到每个父实例

Question

我有一个 div (rateRibbon)，我将其添加到随机数量的 父 div 中，每次父 (rateRibbon) 存在时都需要附加四个子 div。

<div class="ratesListing roomsView">
    <div class="rateTypeLineItems"></div>
</div>

<div class="ratesListing roomsView">
    <div class="rateTypeLineItems"></div>
</div>

1. 与其向每个父级添加四个子 div，不如我如何循环直到达到 4，然后停止？

2. 如何让每个新的 (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>');
});

还有我的Fiddle的链接。

Answer 1

将您的每条消息存储在一个变量中，并将它们合并到 .rateRibbon 的包含中，这样它就会一次发生，您不必过多地查询 DOM。

这是小提琴：http://jsfiddle.net/x8VE5/

修改脚本的关键部分：

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>');

Answer 2

有很多方法可以清理它，但从基础开始，遍历每个速率功能区 -

$('.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>');
});

http://jsfiddle.net/jayblanchard/W25dw/1/

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