Assign content to multiple blocks inside a mixin that dynamically generates a nested HTML structure in Jade?

I want to create the following HTML structure

<div class="outerspace">
    <div class="inner1"><p>Inner1 content</p></div>
    <div class="inner2"><p>Inner2 content</p></div>
    <div class="inner3"><p>Inner3 content</p></div>
    (...)
</div>

while the number of internal divsmay vary.

Example 1:


I could create two mixins - mix òuterspaceand ìnner, nest them using a keyword blockand place different content for each inner div element:

mixin outerspace()
    div.outerspace
        block

mixin inner($number)
    div(class="inner" + $number)
        block

//- call the mixins
+outerspace()
    +inner(1)
        p Inner1 content
    +inner(2)
        p Inner3 content
    +inner(3)
        p Inner3 content
    ...

Example 2:


This example attempts to do the same with a single mixin:

mixin nested_structure($number)
    div.outerspace
        each item in $number
            div(class="inner" + item)
                block

//- call the mixin
+nested_structure([1, 2, 3])
    p Inner content

This leads to the same structure as described above, but assigns the same content to each of the generated blocks:

<div class="outerspace">
    <div class="inner1"><p>Inner content</p></div>
    <div class="inner2"><p>Inner content</p></div>
    <div class="inner3"><p>Inner content</p></div>
</div>

Question: How can I use Example 2 to create the necessary HTML structure, but at the same time assign different content to each of the internal div elements?

+5
1

"p Inner content" mixin?

mixin nested_structure($number)
    div.outerspace
        each item in $number
            div(class="inner" + item)
                p Inner#{item} content 

//- call the mixin
+nested_structure([1, 2, 3])

:

<div class="outerspace">
    <div class="inner1"><p>Inner1 content</p></div>
    <div class="inner2"><p>Inner2 content</p></div>
    <div class="inner3"><p>Inner3 content</p></div>
</div>
0

All Articles