多个div的insertAfter

Question

我有下面的脚本部分

.on('finish.countdown', function(event) {
        $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
    }) .insertAfter('#cartDefaultHeading');

我希望相同的输出出现在多个div之后，跨越几个不同的页面。如果我更改div名称，它就会像预期的那样出现在一个新位置。但如果我试图让它出现在不止一个，我没有得到任何输出。

我尝试了以下方法

.on('finish.countdown', function(event) {
        $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
    }) .insertAfter('#cartDefaultHeading').insertAfter('#checkoutOrderHeading');

和

.on('finish.countdown', function(event) {
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
}) .insertAfter('#cartDefaultHeading'), .insertAfter('#checkoutOrderHeading') ;

甚至

.on('finish.countdown', function(event) {
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
}) .insertAfter('#cartDefaultHeading');
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
}) .insertAfter('#checkoutOrderHeading');

都没起作用。无论什么时候，我都不想让它出现在一个以上的地方。实现这一目标的正确语法是什么？

完整的脚本如下所示：

<script>
jQuery(function($){
if (($('#cartDefaultHeading').length || $('#checkoutOrderHeading').length) && !$('.checkout_dispatch_timer').length) {
    var $this = $('<div class="checkout_dispatch_timer <?php echo $dispatch_countdown_timer_style; ?>"></div>');
    <?php if ($dispatch_countdown_timer_disable === false) { ?>
    var finalDate = moment.tz('<?php echo $dispatch_countdown_timer_date_array[4]; ?>', '<?php echo date_default_timezone_get(); ?>');
    $this.countdown(finalDate.toDate())
    .on('update.countdown', function(event) {
        var format = '%Mm';

        if (event.offset.totalDays > 0) {
            format = '%Dd:%Hh:' + format;
        } else if (event.offset.totalHours > 0) {
            format = '%Hh:' + format;
        } else {
            format = format + ':%Ss';
        }

        dispatch_countdown_timer_text = "<?php echo $dispatch_countdown_timer_text; ?>";
        dispatch_countdown_timer_text = dispatch_countdown_timer_text.replace('%s', event.strftime(format));

        $(this).text(dispatch_countdown_timer_text);

    })
    .on('finish.countdown', function(event) {
        $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
    }) 
    .insertAfter('#cartDefaultHeading');
<?php } else { ?>
    $this.text("<?php echo $dispatch_countdown_timer_text; ?>").insertAfter('#checkoutOrderHeading');
<?php } ?>
}
});
</script>

Answer 1

您不能多次使用.insertAfter()，因为每个元素都将从前一个位置删除，然后尝试在下一个位置之后插入元素。使用.after。

​

$('#cartDefaultHeading, #checkoutOrderHeading').after(
  $this.countdown(finalDate.toDate())
  .on('update.countdown', function(event) {
    var format = '%Mm';

    if (event.offset.totalDays > 0) {
      format = '%Dd:%Hh:' + format;
    } else if (event.offset.totalHours > 0) {
      format = '%Hh:' + format;
    } else {
      format = format + ':%Ss';
    }

    dispatch_countdown_timer_text = "<?php echo $dispatch_countdown_timer_text; ?>";
    dispatch_countdown_timer_text = dispatch_countdown_timer_text.replace('%s', event.strftime(format));

    $(this).text(dispatch_countdown_timer_text);

  })
  .on('finish.countdown', function(event) {
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
  })
);

​

这假设任何页面只有一个#cartDefaultHeading和#checkoutOrderHeading，因为您不能在多个位置插入相同的元素(.after和.insertAfter不复制，而是移动元素本身)。

Answer 2

根据文档，您可以向函数传递一个元素数组。来源：http://api.jquery.com/insertafter/

`insertAfter(['#cartDefaultHeading','#checkoutOrderHeading']);