Access div in nested meteor template

Question

I'm trying to access or to be more precise remove a class inside a nested template from its parent template. Here is how my code is structured.

Parent Template

<template name='paymentTemplate'>
  <div class="progress-wrapper">
     {{>progressBar }}
  </div>
 </template>

Child Template

<template name="progressBar">
<div class="progress">
      <div class="checkoutPrg progress-bar progress-bar-success" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Checkout
    </div>
    <div class="DeliveryPrg progress-bar progress-bar-danger " role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Delivery
    </div>
    <div class="PaymentPrg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Payment
    </div>
    <div class="ConfirmationPrg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Confirmation
    </div>


</div>
</template>

So, my aim is to remove the class progress-bar-danger from each respective div and replace it with progress-bar-success on the fly. Any ideas how to accomplish that?

Answer 1

Assuming you have a function that triggers when the progressbar is complete, you can use simple jQuery like so:

$('.DeliveryPrg').removeClass('progress-bar-danger');
$('.DeliveryPrg').addClass('progress-bar-success');

This can be done in either the parent Template (if that's where the completion function runs), or in the sub Template, or even in some other Template completely unrelated. The only requirement is that the nested template should have been already rendered.

When directly selecting DOM elements, there's no requirement that it must be done by the template that actually renders that element. The DOM element doesn't know which template rendered it :-)