CODEWITHSUNDEEP
conditional-statementspugindentation
user3415011
user3415011

Reputation: 195

Conditional with parent and child div in JADE

Here my actual code :

each val, index in array
  if (index%3 == 0)
    .parent
  .child

or this one :

each val, index in array
  if (index%3 == 0)
    .parent
      .child
  else
      .child

What i want is, accpeting the condition is true, add the block parent .row, when the condition is not true add the child inside the parent. The final goal is to have this code :

 <div class='row'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
 </div>
 <div class='row'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
 </div>

But the code i have for the moment with my actual code is :

 <div class='row'></div>
 <div class='child'></div>
 <div class='child'></div>
 <div class='child'></div>
 <div class='row'></div>
 <div class='child'></div>
 <div class='child'></div>
 <div class='child'></div>

I tried many differents indentations but nothing works, everytime I write the parent in a conditon the block is automaticaly close, I don't know how to keep it open, or re-open it to put the content in it.

Upvotes: 1

Views: 2365

Answers (3)

MAOg0espr0
MAOg0espr0

Reputation: 25

This maybe a bit late, but someone might be still looking for answers like me. Like Timothy said, transforming the array is quite the only way. If you are gonna use html explicitely why use a template system like pug anyway..However, instead of using the pure javascript approach Timothy recommended I find using mixins much more convenient, because if you just use javascript then just change the data structure before passing it into the template system.

So here is my mixin function (beware of the possibly wrong tabs, it is crucial to get them right):

mixin nColumnGrid(array, columns)
- var colClass = 'col-md-' + (12 / columns)
each val, index in array
	.row
		.col-md-12
			h5=index
	- var i = 0;
	while i < val.length
		.row
			- var j = 0;
			while j < columns && i < val.length
				div(class=colClass)=val[i]
				- j++
				- i++
doctype html(lang='en')
html
head
body
	.container
		+nColumnGrid(categories, 3)

My categories array looks like this

        categories: {
            first: [
                'this is the first subforum of the first category'
            ],
            second: [
                'this is the first subforum of the second category.',
                'this is the second subforum of t he second category',
                'this is the first subforum of the second category.',
                'this is the second subforum of t he second category'
            ]
        }

Hints:

  • I'm inserting headers, just remove them if you don't like them.
  • And I'm using the bootstrap grid system.
  • Hence, the columns parameter should be a numerical divisor of 12.

Cheers m8es

Upvotes: 1

Maryia Sinkevich
Maryia Sinkevich

Reputation: 1

each val, index in array
  if (index%3 == 0)
    .parent
      block child
        .child
  else
    block child

Upvotes: 0

Timothy Gu
Timothy Gu

Reputation: 3865

Jade is designed to make it easy to end tags. For this reason, unfortunately, it is not possible to have manual control over when to close the tags in a situation like this.

So, AFAICS, you have two options: 1. changing the array to something that fits the Jade workflow, or 2. start and end tags manually with piped text.

Transforming the array

Something like this would work:

//- You might want to put the `paired` array generation in your
//- main server file instead of the Jade template
- var paired = []
- array.forEach(function (element, index) {
-   if (index % 3 === 0) {
-     paired.push([element])
-   } else {
-     paired[paired.length - 1].push(element)
-   }
- })

each row in paired
  .row
    each val in row
      .child

Manually control tag ending

each val, index in array
  if (index % 3 === 0)
    | <div class="row">
  .child
  if (index % 3 === 2 || index === array.length - 1)
    | </div>

Admittedly, neither way is extremely pretty, but better than nothing right?

Upvotes: 5

Related Questions