javascript - insertAfter 为多个 div

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

没有一个有效。每当我尝试将它放在多个 div 上时，我都得不到它。实现此目的的正确语法是什么？

完整的脚本如下所示:

<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 不会复制，它会移动元素本身)。