Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Python

Posted by Connor James
Connor James
5,380 Points

Dynamically change div class inside django template for loop

I have a Django ListView. For every item in the list view I want to change the div class. E.g. 

{% for object in object_list %}
  <script>
      {% block scripts %}
          var letters = ['a', 'b'];
      {% endblock %}
  </script>
  # change div class for every object in object_list
  <div class=letters[object_list.index(object)]></div>
{% endfor %}

BUT, I do not understand how django templates handle js scripts inside of them. Is there a way I could do this by referencing a script in my static folder? Any feedback would be greatly appreciated.

2 Answers

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Connor,

Yes, you can simply reference a script in your static folder, similar to how you'd reference CSS files in Django.

Example:

<script src="{% static 'my_app/js/script.js' %}" type="text/javascript"></script>
Connor James
Connor James
5,380 Points

I should have been more clear.. I understand how to reference the scripts, but not the divs. I have a list of 5 items, and I want each to be in a different shaped div (each list item goes into a different div). Do you have any leads on how to do this within the ListView for loop?

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

If I understand correctly, you basically have the following code (simplified):

{% for object in object_list %}
  <div>{{ object }}</div>
{% endfor %}

And you want to dynamically insert the class on the div such that each div is different?

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Connor,

You can't use the .index() method on a queryset in a template, but there are a few other options to accomplish what you are trying to do.

The first option is to write a JS script to dynamically insert the classes after the template is rendered. You can't embed JavaScript into the templates like PHP into HTML, but it would only require a simple jQuery script to insert your classes. Although, if you want to utilize some extra python variables in your template, you can take a look at the with template tag.

Another thing you can do is use Django's forloop.counter in your class name. This counter starts at 1 and increments by 1 for each repetition of the for loop.

Example:

{% for object in object_list %}
  <div class="some-class-{{ forloop.counter }}">{{ object }}</div>
{% endfor %}

You'd then end up with some html like this:

  <div class="some-class-1">...</div>
  <div class="some-class-2">...</div>
  <div class="some-class-3">...</div>

And another thing you could do is write a custom template filter to handle this.

Hope this helps.

Connor James
Connor James
5,380 Points

the forloop.counter is exactly what I needed.. thanks :)