Question

我有一个div（rateRibbon），我添加到父 div的随机数，每次父（rateRibbon）存在时都需要附加四个子div。 / p>

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

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

不是向每个父母添加四个子div，而是如何循环直到达到4，然后停止？
如何让每个新的（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/

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

将子div添加到父级的每个实例

2 个答案: