htmlfor-loopnestedfrontendslim-lang

How to nest a div within another div from a for loop using slim

I have the following code

div class = "content"
- for x in list
  -if x == "test"
    div id = "two"

I would expect div id = "two to be nested within div class="content however it appears as its own separate div. How would I go about nesting the div within the content div based on the conditional?

Solution

  • You need to indent lines 2-4, otherwise they're treated as siblings. To quote the docs...

    Indentation matters, but the indentation depth can be chosen as you like. If you want to first indent 2 spaces, then 5 spaces, it's your choice. To nest markup you only need to indent by one space, the rest is gravy.

    div class = "content"
  - for x in list
    -if x == "test"
      div id = "two"